各ループは適切に

Question

<ul class='list-container'> 
<li class='list-item' data-level='parent_level'> 
    <ul> 
     <li data-level='child_level'> Child 1</li> 
     <li data-level='child_level'> Child 2</li> 
    </ul> 
</li> 

<li class='list-item' data-level='parent_level'> 
    <ul> 
     <li data-level='child_level'> Child 3</li> 
     <li data-level='child_level'> Child 4</li> 
    </ul> 
</li> 

これは私のHTMLコードで動作していない属性。

子リストに各要素を印刷したいとします。私は同じもののデータ属性を使用したいと思います。 クラスで要素を取得しようとしました。それは正常に動作しています。

var list = $('list-container'); 
list.each(function(){console.log($(this).html())}); 

このコードでは、出力に次のHTMLコンテンツがあります。私はデータを使用して同じことをしようとした

<li class="list-item" data-level="parent_level"> 
    <ul> 
    <li data-level="child_level"> Child 1</li> 
    <li data-level="child_level"> Child 2</li> 
    </ul> 
</li> 


<li class="list-item" data-level="parent_level"> 
    <ul> 
    <li data-level="child_level"> Child 3</li> 
    <li data-level="child_level"> Child 4</li> 
    </ul> 
</li> 

は、次のように属性：ログの

var list= $.find("[data-level='parent_level']"); 
list.forEach(function(){console.log($(this).html())}); 

出力が '未定義' されます。

'.forEach'を '.each'に置き換えると'eachは関数ではありません 'というエラーが返されます。

list.each(function(){console.log($(this).html())}); 

Answer 1

を以下の更新スニペットをチェックさらに、$("[data-level='parent_level']").each()はあなたにラインを保存します。

あなただけ書き、それが現在出力していることulをしたくない場合は、次の$("[data-level='parent_level'] ul")

var list = $("[data-level='parent_level']"); 
 

 

 
list.each(function() { 
 
    console.log($(this).html()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class='list-container'> 
 
    <li class='list-item' data-level='parent_level'> 
 
    <ul> 
 
     <li data-level='child_level'> Child 1</li> 
 
     <li data-level='child_level'> Child 2</li> 
 
    </ul> 
 
    </li> 
 

 
    <li class='list-item' data-level='parent_level'> 
 
    <ul> 
 
     <li data-level='child_level'> Child 3</li> 
 
     <li data-level='child_level'> Child 4</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

あなたのスクリプト内のいくつかの選択の問題を持って、あなただけのvar list = $("[data-level='parent_level']");

ようにそれを呼び出す.find()を使用する必要がいけない...

var list = $('.list-container'); 
 
list.each(function(){console.log($(this).html())});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class='list-container'> 
 
<li class="list-item" data-level="parent_level"> 
 
    <ul> 
 
    <li data-level="child_level"> Child 1</li> 
 
    <li data-level="child_level"> Child 2</li> 
 
    </ul> 
 
</li> 
 
</ul> 
 

 

 
<li class="list-item" data-level="parent_level"> 
 
    <ul> 
 
    <li data-level="child_level"> Child 3</li> 
 
    <li data-level="child_level"> Child 4</li> 
 
    </ul> 
 
</li>