JQuery index () возвращает 1 вместо 0 для первого элемента

Question

Прежде всего, существует несколько подобных вопросов, но ни один из них не объясняет мой вопрос, поэтому не помечайте его как дубликат.

Не говорите, как достичь индекса 0,но объясните с примером, почему я получаю 1 вместо 0 для 1-го элемента?

Ниже приведен мой код:

<?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>
";
?>

Я получаю 1 со следующим кодом для элемента кнопки (что неверно):

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

, и я получаю 0 со следующим кодом для элемента кнопки (что правильно):

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

Более того, если я использую следующий код для элемента datetime-local, я получаю правильный индекс, то есть 0

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

Пожалуйста, объясните, почему?
Дон 't дать разные методы для достижения индекса 0, скорее объясните «почему это поведение?»

Answer 1

Из документации jQuery о .index()

Если аргумент методу .index () не передан, возвращаемое значение является целым числом, указывающим позициюпервый элемент в объекте jQuery относительно его родственных элементов.

В первом и последнем примере вы использовали .index() без каких-либо аргументов. То есть оба примера проверяют его индекс относительно своих братьев и сестер. datetime-local является первым родным братом, а button вторым.

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

И когда вы используете $('selector').index(element) с аргументом.

If .index ()вызывается для коллекции элементов, и в нее передается элемент DOM или объект jQuery, .index () возвращает целое число, указывающее позицию переданного элемента относительно исходной коллекции.

С аргументом theМетод .index() проверяет индекс элемента (или объекта jQuery) в коллекции. Как поиск элемента внутри массива и определение его местоположения в этом массиве.

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

Но , потому что вы сначала выбираете кнопку: $('.clbtnxpr'), а затем ищите себя внутри этогоjQuery объект: .index(this), результат всегда будет 0, поскольку в запросе '.clbtnxpr' найдена только 1 кнопка, и это та же кнопка, которую вы запросили. Если на странице более одного элемента с одинаковым классом, результат может отличаться в зависимости от положения кнопки на странице.

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