循环遍历多个ul列表

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>每个<ul>(1,5,9)的第一个元素,然后是每个(2,6,10)的第二个元素, 依此类推.

我知道我可以得到<li>一个<ul>by 的所有元素$('#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>