2012-07-23 15 views
7
<div id="ChosenCategory" class="chosen"> 
    <div class="cat_ch" name="1"> 
    <div class="cat_ch" name="2"> 
    <div class="cat_ch" name="3"> 
    <div class="cat_ch" name="5"> 
    <div class="clear"> </div> 
</div> 

Voglio ciclo anche se div.cat_ch Come?jQuery loop through Divs bambino

Questo fallisce:

$("div").each(function() { 
     alert("FW"); 
     alert($(this).attr("name").val()); 
    }); 
+1

Sembra una lista. Pertanto, dovrebbe essere UL/LI, non DIV/DIV. Inoltre, il DIV "chiaro" può essere evitato se si imposta "overflow: auto" sul genitore. –

+0

$ ('. Cat_ch').ciascuna (function() {}); – jeschafe

+0

Sono abbastanza sicuro che 'name' non è un attributo valido di un elemento' div'. –

risposta

3

http://jsfiddle.net/2TRxh/

penso che il problema si trova con il tentativo di ottenere la val fuori dal div dopo aver ottenuto l'attributo $(this).attr("name").val(). Utilizzare .val() su un div non ha senso. Se si rimuove il fatto che $(this).attr("name") restituisce la proprietà name al di fuori dei div. È inoltre possibile specificare i div per eseguire il ciclo utilizzando il selettore di classe in ogni div anziché solo div. $(".cat_ch").each(function() {}); Questo è stato mostrato in varie altre risposte a questa domanda.

1
$(".cat_ch").each(function() { 
     alert("FW"); 
     alert($(this).attr("name").val()); 
    }); 
1

Se si desidera collegare attraverso div.cat_ch, è necessario utilizzare che per il selettore jQuery:

$("div.cat_ch").each(function() { 
    alert("FW"); 
    alert($(this).attr("name").val()); 
}); 

È inoltre possibile scorrere gli elementi figlio utilizzando il metodo jQuery children():

$("#ChosenCategory").children().each(function() { 
    alert("FW"); 
    alert($(this).attr("name").val()); 
}); 

Un terzo modo per scorrere gli elementi desiderati è in questo modo:

$("#ChosenCategory > div").each(function() { 
    alert("FW"); 
    alert($(this).attr("name").val()); 
}); 

Usa in qualunque modo si desidera, non c'è modo migliore.

12
$('#ChosenCategory').children('.cat_ch').each(function() { 

}); 

O

$('#ChosenCategory > .cat_ch').each(function() { 

}); 

di JQuery .children metodo e bambino css3 selettore > torneranno solo i figli diretti che corrispondono il selettore, la classe .cat_ch nell'esempio.

Se si desidera cercare più in profondità nella struttura DOM, cioè, comprendono elementi annidati, utilizzare .find o omettere il selettore bambino:

$('#ChosenCategory').find('.cat_ch').each(function(){}) 

O

$('#ChosenCategory .cat_ch').each(function(){}) 
1
$('.cat_ch').each(function(i, e) { 
    alert('FW'); 
    alert(e.attr('name').val()); 
}); 
4

Se solo voler indirizzare i Div all'interno, prova

$('#ChosenCategory div').each(function() {...}); 

Le altre risposte richiedono classi specifiche e/o elaboreranno anche non div all'interno della divisione padre.

+0

Stai attento! Questo colpirà anche il tuo div "clear", puoi evitarlo facendo $ ('# ChosenCategory div: not (.clear)') invece – tigertrussell

+0

Sì, perché non cambi il selettore in '$ ('# ChosenCategory div.cat_ch ') '? – Stano

+0

Anche se l'OP aveva quelle classi lì, la domanda era veramente formulata come "loop through child divs", quindi volevo dare una risposta che riflettesse su come eseguire il ciclo dei div dei bambini indipendentemente dal loro nome. Il layout di pagina cambia spesso nello sviluppo di un'app, ea volte è bello non dover riscrivere il tuo javascript solo per abbinare diversi selettori. – tigertrussell

5
$(function(){ 

    var items=$(".cat_ch") 
    $.each(items,function (index,item) { 

     alert($(item).attr("name")); 
    }); 

}); 

campione di lavoro: http://jsfiddle.net/GzKHA/

2
 
    function loopOver(obj) 
    { 
     var chl=obj.firstChild; 
     while(chl) 
     { 
      if(chl.nodeType==1) 
      { 
       var isAttr=chl.getAttribute('name'); 
       if(isAttr) 
       { 
        alert(isAttr); 
       } 
      } 
      chl=chl.nextSibling; 
     } 
    } 

    //This is by far the fastest in terms of execution speed!!! 
    var obj=document.getElementById("ChosenCategory"); 
    loopOver(obj); 
Make sure to enclose the each `<div>` tag at the end of each!!