:eq()
are the index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them.
Note: eq() starts with 0, while nth-child() starts with 1
<div>
<p>div1 p1</p>
<p>div1 p2</p>
<p>div1 p3</p>
<p>div1 p4</p>
</div>
<div>
<p>div2 p5</p>
<p>div2 p6</p>
<p>div2 p7</p>
<p>div2 p8</p>
</div>
$('div p:eq(2)').css('color','red');
$('div p:nth-child(2)').css('background-color','green');
output: here red color is applied to div1 p3, because eq() index start with zero.
here green color is applied to div1 p2 and div2 p6, because the nth-child() start with index one.
and it will apply all the nth-child of their parent.
Note:
eq() Will not work as it doesn't except nth value. It only accept fixed value, so the below statement doesn't work.
$('.message2 p:eq(2n+2)').css({"color" : "blue"});
are the index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them.
:nth-child()
Selects all elements that are the nth-child of their parent.
:nth-child()
Selector: selects all elements that are the nth-child of their parent.:eq()
Selector: Select the element at index n within the matched set.Note: eq() starts with 0, while nth-child() starts with 1
<div>
<p>div1 p1</p>
<p>div1 p2</p>
<p>div1 p3</p>
<p>div1 p4</p>
</div>
<div>
<p>div2 p5</p>
<p>div2 p6</p>
<p>div2 p7</p>
<p>div2 p8</p>
</div>
$('div p:eq(2)').css('color','red');
$('div p:nth-child(2)').css('background-color','green');
output: here red color is applied to div1 p3, because eq() index start with zero.
here green color is applied to div1 p2 and div2 p6, because the nth-child() start with index one.
and it will apply all the nth-child of their parent.
Note:
eq() Will not work as it doesn't except nth value. It only accept fixed value, so the below statement doesn't work.
$('.message2 p:eq(2n+2)').css({"color" : "blue"});
No comments:
Post a Comment