jQuery :eq(), :lt(), and :gt() functions not providing expected results

Question

I am using jQuery functionalities of eq() but it is not providing correct results

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div p:eq(1)").css("border","2px solid red");

    });
});
</script> 
</head>
<body>
    <button>Click Me!</button>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
</body>
</html>

Expectation:

I expected 2 lines to be in red (5th and 8th).

Result:

Also, when I am using lt(), I am getting wrong results.

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div p:lt(2)").css("border","2px solid red");

    });
});
</script> 
</head>
<body>
    <button>Click Me!</button>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
    <div>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div> 
</body>
</html>

Expectation:

I expected 4 lines to be in red (6th, 7th, 11th and 12th).

Result:

NOTE:

I know that alternatively I can use, nth-child() , or nth-of-type(), nth-last(), or nth-last-child(), or :odd(), or :even(); or :nextAll() or :prevAll(), but I want to know, why is this not working! ;( .

Can someone help me out where is the problem?

score 4 · Accepted Answer · edited May 23 '17 at 12:30

The results are correct. The problem therefore appears to be in your expectations of how these selectors work, because you are stating that the results are wrong when they are in fact correct.¹

div p:eq(1) matches the second div p. There can only be one such element, as :eq() by definition matches exactly one element at a time (or none if there are no matches). There can't be more than one.

div p:lt(2) matches the first two div p elements. There can only be at most two of these elements since you specifically asked for the first two of them.

If you're looking for the second p in each div, then you need to .each() the div elements and do .find('p:eq(1)') and .find('p:lt(2)') respectively. Or just use div p:nth-child(2) and div p:nth-child(-n+2) respectively and forgo the non-standard jQuery selectors and the loops.

¹ _{But I don't blame you — the syntax makes these selectors very confusing in terms of their functionality and I simply avoid using them altogether for this reason.}

score 1 · Answer 2 · answered Dec 25 '15 at 14:16

The jQuery selector expression "div p" will give you all 6 p tags inside the 2 divs. and you are applying the eq(1) on top of that 6 items, which will give you only one item.

If you want the first item from each div, you can try this

var items=$("div");
$.each(items,function(a,b)
{
    $(b).find("p").eq(1).css("border","2px solid red"); 
});

Here inside the each loop, when you execute $(b).find("p"), It will give you 3 p tags and on top of that when you run eq(1), it will give the correct items each times.

Here is a working sample

score 0 · Answer 3 · edited Dec 30 '15 at 07:49

0

You can use nth-child() on jquery , it's derived from css selectors :

Selects all elements that are the nth-child of their parent. (..) the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single <ul> containing two <li>s, $( "li:nth-child(1)" ) selects the first <li> while $( "li:eq(1)" ) selects the second.

See more at : http://api.jquery.com/nth-child-selector/

edited Dec 30 '15 at 07:49

Mr Lister

45,515
15
108
150

answered Dec 25 '15 at 14:11

BAHRI Abdelhak

82
8

I know that brother. nth-child() , or nth-of-type(), nth-last(), or nth-last-child(), or :odd(), or :even(); or :nextAll() or :prevAll(), but I want to know, why is this not working! ;( ... – Deadpool Dec 25 '15 at 14:12

jQuery :eq(), :lt(), and :gt() functions not providing expected results

3 Answers3