Question

我正在尝试计算容器的所有子元素。元素是不同类型的。不幸的是，这段代码返回“0”。我错了什么？

var count = $(".slide-container").children().length;
alert(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
  <p>SLIDE 1</p>
  <article>SLIDE 2</article>
  <div>SLIDE 3</div>
  <img src="img/gallery/some.jpg" />
</div>

Answer 1

在DOM加载完成后，您需要使用$(document).ready()来运行脚本。目前它在完成加载页面上的所有内容之前运行。

//use $(document).ready() to run the script when the DOM is loaded
$(document).ready(function() {
  var count = $(".slide-container").children().length;
  alert(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slide-container">
  <p>SLIDE 1</p>
  <article>SLIDE 2</article>
  <div>SLIDE 3</div>
  <img src="img/gallery/some.jpg" />
</div>

Answer 2

在调用变量count

之前，尚未创建DOM

请使用($document).on("ready")功能：

   <script>
    $(document).on('ready',function(){
       var count = $(".slide-container").children().length;

       alert(count);
    });
</script>
<div class="slide-container">

        <p>SLIDE 1</p>

        <article>SLIDE 2</article>

        <div>SLIDE 3</div>

        <img src="img/gallery/some.jpg" />

    </div>

我如何计算容器的孩子？ .children（）。长度返回0

2 个答案: