Question

I’m trying to add borders to the middle column in a three column row. This:

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

Gives me 6, and I’m trying to figure out how to apply a style to the divs in the middle? (in this case, div 2 and 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>

Is there a way to do that based on the div # and not the id? Like, some sort of foreach loop or something?

Answer 1

There are lots of ways to do this. It depends on how your data is structured. The brute force way if there are only 6 columns:

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

You can also use an equation with :nth-child:

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