Question

我遍历了每个li中的所有元素。我要做的是找到每个el相对于group-fields div的索引。我在每个li标签内都有一个所有el的数组。

for (var i = 0; i < arr.length; i++) {
      var el = arr[i];
      var li = el.closest('li');
      console.log( "li index =", li.index() );
}

上面给出了相对于每个父项的索引，它是col-1中每个li的索引，然后是col-2中每个li的索引。我想知道与最顶层元素组字段相关的每个元素的索引。

松散的HTML示例：

<div class="group-fields">
  <div class="col-1">
    <ul>
      <li>
        <input>el</input>
      </li>
      <li>
        <input>el</input>
      </li>
      <li>
        <div>el</div>
      </li>
    </ul>
  </div>
  <div class="col-2">
    <ul>
      <li>
         <div>el</div>
      </li>
      <li>
        <input>el</input>
      </li>
      <li>
        <input>el</input>
      </li>
    </ul>
  </div>
</div>

Answer 1

console.log( "li index ="+ i );

上面的代码是错误的。它应该是

function AddToNewsDiv(name, caption, pictureURL, imageID, newsId, nameURL) {
    var mydiv = "rssjbNews"+newsId;
    //alert("mydiv: "+mydiv);
    //alert ('AddToNewsDiv      name : ' + name + '  pictureURL : ' + pictureURL + '    caption: ' + caption );

    $("#"+mydiv).append("<A class='title' href='http://employees.blah.org/' target='_blank'>"+name+
    "</A><SPAN class='excerpt'>"+caption+" |</SPAN><a class='btn-mini' href='"+nameURL+"'>View details »</a>");

};

另外，我不知道函数index（）来自哪个。

Answer 2

您可以使用：

var index = $(li).closest('.group-fields').find('li').index( li );

下面我只是将click事件用于演示目的：

＆＃13;

$('li').on('click', function() {
  //this is how to:::
  var index = $(this).closest('.group-fields').find('li').index( this );
  console.log( 'You clicked li with index = ' + index );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group-fields">
  <div class="col-1">
    <ul>
      <li>
        <input>el</input>
      </li>
      <li>
        <input>el</input>
      </li>
      <li>
        <div>el</div>
      </li>
    </ul>
  </div>
  <div class="col-2">
    <ul>
      <li>
         <div>el</div>
      </li>
      <li>
        <input>el</input>
      </li>
      <li>
        <input>el</input>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 3

jQuery的索引要求您提供父集，然后在该集中查找子节点的索引。所以第一件事是使用类group-fields获取元素内部的所有元素的引用，然后遍历该父元素的嵌套li元素内的元素集。通过使用数组，您可以存储这些元素及其索引引用。

＆＃13;

var inputs = [];
var parent = $('.group-fields *')
parent.find('li *').each(function(){
 console.log(this);
 console.log(parent.index(this));
 inputs.push({ el: this, index: parent.index(this) });
});
console.log(inputs);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group-fields">
  <div class="col-1">
    <ul>
      <li>
        <input value="el" />
      </li>
      <li>
        <input value="el" />
      </li>
      <li>
        <div>el</div>
      </li>
    </ul>
  </div>
  <div class="col-2">
    <ul>
      <li>
         <div>el</div>
      </li>
      <li>
        <input value="el" />
      </li>
      <li>
        <input value="el" />
      </li>
    </ul>
  </div>
</div>
<div id="output"></div>

＆＃13;

获取多个父母的li索引

3 个答案: