Monday, March 10, 2014

what is the difference between eq() and nth-child() in jquery ?

:eq()
 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