2012-07-23 11 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> 

私はループしたいが、div.cat_chどのようにループしたいのですか?jQueryループから子divへ

この1つは失敗します。

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

リストのように見えます。したがって、DIV/DIVではなくUL/LIでなければなりません。また、親に対して 'overflow:auto'を設定すると、" clear "DIVを避けることができます。 –

+0

$( '.cat_ch')です。それぞれ(function(){}); – jeschafe

+0

'name'は' div'要素の有効な属性ではないと確信しています。 –

答えて

3

http://jsfiddle.net/2TRxh/

は、私はあなたの問題はあなたが属性$(this).attr("name").val()を取得した後のdivオフのvalを取得しようとする試みであると思います。 divに.val()を使用しても意味がありません。削除すると、$(this).attr("name")はdiv32からnameプロパティを返します。さらにdivではなく、それぞれのクラスセレクタを使用して、divのループスルーを指定することができます。 $(".cat_ch").each(function() {});これは、この質問に対する他の様々な答えで示されています。

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

あなたはdiv.cat_chをループにしたい場合は、あなたはjQueryのセレクタのためにそれを使用する必要があります。

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

することもできます子要素をループjQuery children()メソッドを使用して:

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

希望の要素をループする第三の方法は、それほどのようなものです:あなたが望む

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

使用どちらの方法は、何の最良の方法はありません。

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

}); 

それとも

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

}); 

jQueryの.children方法およびCSS3子セレクタ>は一例では、セレクタ、クラス.cat_chに一致するのみ直接の子を返します。

あなたはDOMツリーに深く検索したい場合は、つまり、ネストされた要素を含む、.findを使用するか、子セレクタを省略:あなたの場合は

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

それとも

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

を内部のディビジョンのみをターゲットにしたい場合は、試してみてください

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

その他の回答には、特定のクラスが必要です。また、親div内のdiv以外のものも処理します。

+0

警告してください!これはまたあなたの "明確な" divを打つでしょう、代わりに$( '#ChosenCategory div:not(.clear)')を行うことでそれを避けることができます – tigertrussell

+0

ええ、あなたは次にセレクタを '$( 'ChosenCategory div.cat_ch ') '? – Stano

+0

OPにはこれらのクラスがありましたが、質問は実際には "loop through child divs"と表現されていましたので、名前に関係なく子divをループする方法を反映した答えを出したいと思っていました。アプリの開発ではページレイアウトが変更されることが多く、さまざまなセレクタに合わせるためにJavaScriptを書き直す必要がない場合もあります。 – tigertrussell

5
$(function(){ 

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

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

}); 

ワーキングサンプル: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!! 
関連する問題