CODEWITHSUNDEEP
jquery
andys
andys

Reputation: 708

jQuery loop for element and print them

I have html like this:

<ul class="container">
    <li class="sub1">
        <a>Value1</a>
    </li>
    <li class="sub1">
        <a>Value2</a>
    </li>
</ul>
<ul class="container">
    <li class="sub1">
        <a>Value3</a>
    </li>
    <li class="sub1">
        <a>Value4</a>
    </li>
</ul>
...

As you can see there are "UL" with same class and "LI" with the same class. What I need just to loop through every "UL" and every "LI" and print out element "A" value one by one. The problem with my code that it collect all the matches in one. How to loop and print out separate line by line ?

MY code:

$('.container').each(function(i){
   $('.sub1').each(function(a){
        console.log($('a').text());
   });
});

Upvotes: 1

Views: 110

Answers (4)

Eddie
Eddie

Reputation: 26844

If you want to print/console.log each a tag on each line, you have to use $(this).find('a').text()

this is the current .sub1 of the iteration. Then .find the a and get the text.

$(function() {
  $('.sub1').each(function(a) {
    console.log($(this).find('a').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

If you want to loop starting from ul you can:

$(function() {
  $('.container').each(function() {
    console.log( "---- CONTAINER ----" );
    $(this).find('.sub1').each(function() {
      console.log($(this).find('a').text());
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

Upvotes: 2

TwilightTitus
TwilightTitus

Reputation: 297

You can use a query to select the values.

$(".container .sub1 a").each (function (){
  console.log ($(this).text ());
})

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to follow simple operation: 

$(".sub1 a").each(function(el) {
  console.log($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
    <li class="sub1">
        <a>Value1</a>
    </li>
    <li class="sub1">
        <a>Value2</a>
    </li>
</ul>
<ul class="container">
    <li class="sub1">
        <a>Value3</a>
    </li>
    <li class="sub1">
        <a>Value4</a>
    </li>
</ul>

Upvotes: 0

void
void

Reputation: 36703

ul.container li a this will select all the a which are under li.sub1 of ul.container.

$("ul.container li.sub1 a").each(function(el) {
  console.log($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
  <li class="sub1">
    <a>Value1</a>
  </li>
  <li class="sub1">
    <a>Value2</a>
  </li>
</ul>
<ul class="container">
  <li class="sub1">
    <a>Value3</a>
  </li>
  <li class="sub1">
    <a>Value4</a>
  </li>
</ul>

Upvotes: 0

Related Questions