Question

我有一个任务是创建一个代码来列出div的子元素，在div中列出所有li标签，类为“sample_class_2”，并从li标签输出到控制台文本。我当前状态的代码如下所示：

var divListChildren = $('div.sample_clas_2').find('li').text();
console.log(divListChildren);

但它只列出了第一个元素，而不是所有元素。我在这里做错了什么？我应该用jquery或js或两者来做这件事。

Answer 1

使用此代码：

var childrenList = [];
var sampleClass = $('.sample_clas_2');
sampleClass.find('li').each(function(i, v){
  childrenList.push($(v).text());
});
console.log(childrenList);

HTML：

<div class="sample_clas_2">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</div>

https://jsfiddle.net/y2pa13tc/

Answer 2

试试这个：

$('div.sample_clas_2').find('li').each(function() {
    console.log( $(this).text() );
});

Answer 3

像这样使用：

$(document).ready(function(){

    var divListChildren = "";

    $("div.sample_clas_2").find("li").each(function(index,ele){
        divListChildren += ele.innerHTML + " ";
    })

    console.log(divListChildren);
})

最终代码：

＆＃13;

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="sample_clas_2">
            <li>Ehsan</li>
            <li>taghdisi</li>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
           $(document).ready(function(){
               var divListChildren = "";
                $("div.sample_clas_2").find("li").each(function(index,ele){
                  divListChildren += ele.innerHTML + " ";
               })
                console.log(divListChildren);
           })
        </script>
    </body>
</html>

＆＃13;

输出到div中所有li的控制台列表

3 个答案: