jQuery - Applique le style au div central dans une rangée de trois colonnes?

Question

J'essaye d'ajouter des frontières à la colonne du milieu dans une rangée de trois colonnes. Ce:

var subcount = $j('#sub > div').size(); 

me donne 6, et je suis en train de comprendre comment appliquer un style aux divs au milieu? (Dans ce cas, div 2 et div 5)

<div id="sub"> 
<div>div 1</div> <div>div 2</div> <div>div3</div> 
<div>div 4</div> <div>div 5</div> <div>div6</div> 
</div> 

Est-il possible de le faire en fonction de la div # et non l'id? Comme, une sorte de boucle foreach ou quelque chose?

Answer 1

Il existe de nombreuses façons de procéder. Cela dépend de la structure de vos données. La façon dont la force brute s'il n'y a que 6 colonnes:

$("#sub > div:nth-child(2), #sub > div:nth-child(5)").css("border", "1px solid black"); 

Vous pouvez également utiliser une équation avec :nth-child:

$("#sub > div:nth-child(3n+2)").css("border", "1px solid black"); 

Answer 2

Si ceux-ci sont en effet colonnes, vous seriez probablement mieux d'utiliser un vrai table car il est mieux adapté pour les données tabulaires. Vous n'avez également pas marqué vos lignes, ce qui rend difficile la sélection des colonnes. Une façon de le faire serait:

var n = 1; 
$('#sub > div').filter(function() { return n++ % 3 == 2 }); 

Answer 3

Je vais vous suggérons d'ajouter une classe dans le code derrière, puis appliquez un sélecteur de clase. Ou, mieux, un style CSS.

Si vous devez utiliser jQuery, la solution Cletus est exactement ce que vous voulez.

Answer 4

Depuis le tableau retourné par JQuery est indexé zéro, lancez simplement quelque chose comme ça pour les éléments « div » 2 et 5:

$(document).ready(function() { 
    $("#sub div").filter(function (i) { 
     return i == 1 || i == 4; 
    }).css("background", "#b4b0da"); 
});