Question

我有多个<ul>列表，其中包含相同数量的<li>元素：

<ul id='first'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='second'>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<ul id='third'>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

我想首先得到每个<li>（1,5,9）的第一个<ul>元素，然后是每个（2,6,10）的第二个元素，依此类推。

我知道我可以通过<li>获取<ul>的所有$('#first li').each(...)元素。是否有类似的命令以上述顺序获取<li>元素？

Answer 1

您可以使用 eq() （或 :eq() ）方法以及 each() 方法。

// iterate ove li elements
$('#first li').each(function(i) {
  console.log(
    // get text from li
    $(this).text(),
    // get li from second based on index and get text
    $('#second li').eq(i).text(), //  you can also use `$('#second li:eq(' + i + ')')`
    // get li from third based on index and get text
    $('#third li').eq(i).text());
});

// iterate ove li elements
$('#first li').each(function(i) {
  console.log(
    // get text from li
    $(this).text(),
    // get li from second based on index and get text
    $('#second li').eq(i).text(),
    // get li from third based on index and get text
    $('#third li').eq(i).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='first'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='second'>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<ul id='third'>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

或者您可以使用 text() 方法进行回调，而不是 each() 方法。

// iterate over li elements where first argument holds index
// and second argument holds the text content
$('#first li').text(function(i, v) {
  console.log(
    v,
    // get li from second based on index and get text
    $('#second li').eq(i).text(),
    // get li from third based on index and get text
    $('#third li').eq(i).text());
});

// iterate ove li elements
$('#first li').text(function(i, text) {
  console.log(
    text,
    // get li from second based on index and get text
    $('#second li').eq(i).text(),
    // get li from third based on index and get text
    $('#third li').eq(i).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='first'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='second'>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<ul id='third'>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Answer 2

您必须使用:eq在列表中找到必要的元素

$(document).ready(function(){
  var uls = $("ul");
  
  // Get length of lis in all uls
  var lengths = $.map(uls, function(ul){
    return $(ul).find('li').length;
  });
  
  // Get max length to iterateover it.
  var maxLen = Math.max.apply(null, lengths);
  
  // Loop over maxLen and get li's value
  for (var i=0; i<maxLen; i++){
    var lis = $.map(uls.find('li:eq('+i+')'), function(li){
      return $(li).text()
    });
    console.log(lis)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id='first'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='second'>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<ul id='third'>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Answer 3

获取max li children的计数然后相应地迭代

var count=0;

$("ul").each(function(){

   var num = $(this).children("li").length;
   if(num > count)
   {
     count = num;
   }

});



for (var i=1 ; i<=count ; i++)
{

  $("ul").each(function(){


    alert($(this).children().eq(i).text());

  });
}

Working demo

Answer 4

$('#first, #second, #third').find('li');

会做的伎俩

jQuery对于直接孩子可能有.child()方法，我不记得了。

更多的口头表达：

$('#full .first .selector, #second .full .selector, .etc');

由于jQuery采用所有数量的CSS选择器，但随着选择器数量的增加，它可能会越来越不易读，但你总是可以先构建它。

循环遍历多个ul列表

4 个答案: