如何迭代jQuery中的一系列类

Question

I have a series of elements, all of the same class.

<img class="clicker" src="#"/>
<img class="clicker" src="#"/>
<img class="clicker" src="#"/>

I want to be able to iterate through these classes and alert each of their src attributes to the user using jQuery.

var one = $('.clicker').attr('src');
    alert(one);
    while($('.clicker').next().length){
        ...
        ...
    alert(next src);
    }

I'm not really sure how to write this while loop, or if there is something better to use than while in this instance. How should I do this?

Answer 1

You need the following:

$(".clicker").each( function() {
  alert($(this).attr('src'));
});

Answer 2

Use jquery each to loop over

 $('img.clicker').each(function(i, v) { alert($(this).attr('src')) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="clicker" src="#" /> <img class="clicker" src="#" /> <img class="clicker" src="#" /> 

Answer 3

Fairly simple as follows

$(".clicker").each( () =>{
  //Your code
});

Answer 4

Example code in fiddle

$('.clicker').each(function(){
    console.log($(this).attr('id')); // used id instead of src as src doesn't have any value other than #
});

Answer 5

Try this

$( ".clicker" ).each(function() {
      console.log( $( this ).attr('src') );
    });

Reference