2009-06-29 5 views
2

Je suis nouveau à jQuery.Itération dans JQuery

J'ai un incrément variable dans mon code qui montre le nombre de divs inn du panneau. Je veux parcourir ces divs pour obtenir les propriétés des étiquettes, le type d'entrée, la taille de tout dans chaque div.

À partir de 1, je veux parcourir jusqu'à incrément .. Comment puis-je faire dans JQUery? S'il vous plaît donnez-moi une suggestion.

Répondre

4

Si vous voulez itérer tous divs dans un panneau JQuery alors la meilleure façon serait de faire simplement ce qui suit:

$("#panel div").each(function() { 
    // $(this) refers to the div 
} 

Si vous voulez limiter au premier N divs puis il y a de nombreuses façons de le faire:

$("#panel div:lt(" + (N+1) + ")").each(function() { 
    // limits to the only those div's less than N+1. 
} 
2

Je voudrais aller avec ce que dit samjudson, mais avec un peu plus d'élaboration. Tout d'abord, le sélecteur "#panel div" obtient tous les divs dans l'élément avec un ID de "panneau", qui ressemble à ce que vous voulez. Ensuite, en utilisant la fonction 'each' de jQuery, vous pouvez appeler une fonction arbitraire, chacune de vos divs étant liée à l'élément 'this'. Donc, dans la fonction, "this" est en fait l'élément de chaque div dans le DOM. En faisant référence à $ (this), vous obtenez la puissance de jQuery interagissant sur l'élément - mais si vous avez juste besoin des propriétés nues de l'élément DOM lui-même, vous pouvez les obtenir directement à partir de 'this'.

$('#panel div').each(function(i) { 
    // 'this' is the div, i is an incrementing value starting from 0, 
    // per zero-based JS norms 
    // If you're going to do a lot of jQuery work with the div, 
    // it's better to make the call once and save the results - more efficient 
    var $this = $(this); 

    // If you want to get out before you're done processing, 
    // simply return false and it'll stop the looping, like a break would 
    if (i > 4) { return false; } 

    // Look up the labels inside of the div 
    // Note the second argument to the $ function, 
    // it provides a context for the search 
    $("label", this).each(function(){ 
     // 'this' is NOW each label inside of the div, NOT the div 
     // but if you created a $this earlier, you can still use it to get the div 
     // Alternately, you can also use $(this).parent() 
     // to go up from the label to the div 
    }); 
})