通过循环动态jQuery选择器？

Question

How do I loop through a set of numbers to target my elements? Eg.

    for ( i = 1; i < 9; i++ ) {
        $( 'myPetal'+i ).myX = 500;
        $( 'myPetal'+i ).myY = 500;
    }

Answer 1

Don't forget in in jQuery you still need selectors:

For IDs you would do

 for ( var i = 1; i < 9; i++ ) {
      $( '#myPetal'+i ).myX = 500;
      $( '#myPetal'+i ).myY = 500;
 }

And for classes

for ( var i = 1; i < 9; i++ ) {
         $( '.myPetal'+i ).myX = 500;
         $( '.myPetal'+i ).myY = 500;
    }

Your code sample would look for <myPetal[i]> in the DOM.

Answer 2

You can avoid the loop and instead use the prefix myPetal in the query to get all elements that has a class that starts with that value:

$("*[class^='myPetal']").attr('myY', 500);

Same idea could be applied in case of using other attributes

Answer 3

 $('.class1').attr('myX', 500); $('.class1').attr('myY', 500); $('.class1').html('myX : '+$('.class1').attr('myX') + ' myY : '+$('.class1').attr('myY')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="class1">class1</div> <div class="class1">class1</div> <div class="class1">class1</div> 

if you have the same class for the elements and the value you want to add is same you can do it this way, or you can loop it using .each() function like this

$('.class1').each(function(){
   $(this).attr('myX', 500);
   $(this).attr('myY', 500);
})