获取多个父母的li索引

获取多个父母的li索引,第1张

我遍历了每个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>

最佳答案:

3 个答案:

答案 0 :(得分:0)

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()来自哪个。

答案 1 :(得分:0)

您可以使用:

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

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

&#13; &#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; &#13; &#13;

答案 2 :(得分:0)

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

&#13; &#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; &#13; &#13;

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复