CODEWITHSUNDEEP
jqueryindexingtraversalnodename
Mark Knol
Mark Knol

Reputation: 10163

jquery find index() of same node name

I have this setup, just to find the index() of an element, but it should look at elements of the same level with the same nodename.

The returning numbers are not as expected. See the code comment. I want filteredByNodeNameIndex to be '2'.

Hope this example code is clear enough:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>TestDrive</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" >
        function TestDrive()
        {
            var $obj = $("#div2");
            console.log("$obj.length:" + $obj.length); // returns: 1

            var $filtered = $obj.parent().children($obj[0].nodeName); // find all divs in same parent
            console.log("$filtered.length:" + $filtered.length); // returns: 3 

            var $obj_clone = $filtered.find($obj); // find original element again. Is something wrong here? 
            console.log("$objAgain.length:" + $obj_clone.length); // returns: 0

            var filteredByNodeNameIndex = $obj_clone.index(); // i want the number 2 here
            console.log("filteredByNodeNameIndex:" + filteredByNodeNameIndex); // returns: -1
        }
    </script>
</head>
<body onload="new TestDrive()">
    <div id="container"> 
        <!-- some random elements just for test -->
        <a></a>
        <div id='div1'></div>
        <div id='div2'></div>
        <span></span>
        <span></span>
        <a></a>
        <div></div>
        <a></a>
    </div>
</body>
</html>

Who can spot where this is wrong?

Upvotes: 0

Views: 754

Answers (4)

Andy
Andy

Reputation: 30135

try:

var $obj_clone = $filtered.filter($obj);

.find() only looks for children

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

find only searches children of the selected node. You are trying to use filter's functionality. You need the following:

        var $obj_clone = $filtered.filter($obj); // find original element again. Is something wrong here?

Upvotes: 2

James Allardice
James Allardice

Reputation: 165941

Try using .filter instead of .find:

var $obj_clone = $filtered.filter($obj);

The problem with .find is that it looks for children of the matched element, not siblings. From the docs:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Compared to .filter:

Reduce the set of matched elements to those that match the selector or pass the function's test.

Upvotes: 5

Rob W
Rob W

Reputation: 348962

At the third attempt, you're trying to find the the child in itself, which obviously doesn't return the desired value.

Illustrated:

 var $filtered = $obj.parent().children($obj[0].nodeName);
 //Select set A

 var $obj_clone = $filtered.find($obj);
 //Search for set A among the CHILDREN of set A --> Fails, obviously?

 var filteredByNodeNameIndex = $obj_clone.index();
 //Unexpected results.

Upvotes: 1

Related Questions