JQuery index() returning 1 instead of 0 for first element

user_5866694 0
Viewed 180

First of all, there are multiple question like this, but none of them explain my question, thus don't mark this as duplicate.

Don't tell how to achieve index 0, but, explain with example why I am getting 1 instead of 0 for 1st element?

Following is my code:

<?php
echo "<div class='container'>
<table class='table'>
<tr><th>mobile no.</th><th>app user name</th><th>expiry date</th></tr>
";
$q="SELECT d,c,m,n,a FROM asdf;";

$s=$link->prepare($q);
$s->execute();
$rs=$s->FetchAll();
foreach($rs as $r){
    echo"
        <tr>
            <td><input type='hidden' class='hdn' value='".$r['d']."'/>+".$r['c'].'-'.$r['m']."</td>
            <td>".$r['n']."</td>
            <td>
                <input class='cl_xpr' type='datetime-local' step='1' value='".date('Y-m-d\TH:i:s', strtotime($r['a']))."'/>
                <input type='button' class='clbtnxpr' value='set this date'>
            </td>
        </tr>
    ";
}
echo"
</table>
";
?>

I get 1 with following code for button element (which is wrong):

$('.clbtnxpr').click(function(){
    var vx=$(this).index();
    alert(vx);
});

and I get 0 with following code for button element (which is correct):

$('.clbtnxpr').click(function(){
    var vx=$('.clbtnxpr').index(this);
    alert(vx);
});

More over, if i use following code for datetime-local element, I get correct index, i.e. 0

$('.cl_xpr').click(function(){
    var vx=$(this).index();
    alert(vx);
});

Please explain, why?
Don't give different methods to achieve index 0, rather, explain 'why this behavior?'

css html jquery javascript
1 Answers

From the documentation of jQuery about .index()

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

In your first and last example you used .index() without any arguments. Meaning both examples check its index relative to their siblings. The datetime-local being the first sibling en the button the second.

input[type="datetime-local"] -> 0
input[type="button"] -> 1

And when you use $('selector').index(element) with an argument.

If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.

With argument the .index() method checks the index of the element (or jQuery object) in a collection. Like searching for an element inside an array and determining where in that array it is.

[
  'input[type="datetime"]', -> 0
  'input[type="button"]' -> 1
]

But because you first select the button: $('.clbtnxpr') and then look for itself inside that jQuery object: .index(this), the result will always be 0 because there is only 1 button found with the '.clbtnxpr' query and it is the same button that you've queried. Unless there are more than 1 of those elements with the same class on the page the result could be different, depending on which position the button has on the page.

// Only one button here, and it's index is 0.
$('.clbtnxpr'); // { 0: input, length: 1};
user_116196470
Related