Loop through multiple ul list

Question

I have a list <ul>with the same number of elements <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>

I want to get the first element of <li>each <ul>(1,5,9) first, then the second for each (2,6,10), etc.

I know that I can get all the <li>items <ul>on $('#first li').each(...). Is there a similar command to get items <li>in the above order?

Answer 1

You can use (or ) along with the method. 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>

Run code

---

Or you can use the callback method instead . 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>

Run code

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 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

,

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());

  });
}

Answer 4

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

jQuery may have a method .child()for the immediate child, I don't remember.

More verbal would be:

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

Since jQuery accepts the CSS selector in all quantities, but may be less clear as the number of selectors grows, but you can always build it.