如何用 Javascript 计算 <div>答案

【问题标题】：How to count <div> with Javascript如何用 Javascript 计算 <div>
【发布时间】：2021-09-17 06:21:53
【问题描述】：

大家好，我的代码有问题。我有一个主要组件，其中有不同的子组件，如下所示：

<template>
 <div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>
</template>

v-if 是因为我只想在前端逐步渲染一个组件。所以当我启动我的应用程序时，我只显示第一个组件，当我单击下一步时，我显示第二个组件，依此类推。

现在我想要一个页面指示器，所以我必须计算“容器”的子 div 标签。为此，我已经尝试了以下选项：

var count = $("#container div").length; //返回 0
var count2 = $("#container").children().length; //返回 2

结果是错误的，因为真正的结果是 4，因为有 4 个子 div。我认为问题在于，其他组件并未全部呈现，但我该如何解决这个问题？

【问题讨论】：

向 div 添加数据属性以指示页面并从元素的数据集属性中检索该页面。 `
`
简单地通过改变数组或类似对象的数组来计算差异
你在这里使用 Vue 吗？
@dave 是的，没错
试试这个：Object.values($("#container").childNodes).filter(x => x.nodeName === "DIV").length

标签： javascript html css vue.js

【解决方案1】：

鉴于您使用的是 Vue，我会在您的数据对象中使用一个计数器来跟踪您的位置，然后在您单击按钮时将其递增以继续下一步：

new Vue({
  el: "#app",
  data: {
    currentStep: 1
  },
  methods: {
    increaseStep() {
      if (this.currentStep > 4) {
        return;
      }
      this.currentStep++;
    }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container">

    <div v-if="currentStep >= 1">Step 1</div>
    <div v-if="currentStep >= 2">Step 2</div>
    <div v-if="currentStep >= 3">Step 3</div>
    <div v-if="currentStep >= 4">Step 4</div>
    
    <button v-on:click="increaseStep">Next step</button>

  </div>


</div>

【讨论】：

如果到了第4步，用户又点击了怎么办？
currentStep 值会不断增加，但 DOM 不会发生任何变化。我已经更新了答案，使其成为检查currentStep 值的方法。

【解决方案2】：

var count = $("#container div").length;
document.write(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>

【讨论】：

【解决方案3】：

检查相同，但它似乎对我有用。

可能需要在文档准备好后检查长度。我的意思是在mounted 生命周期方法中。

但除非别无选择，否则在另一个库中使用 jQuery 并不是更好的方法。

所以在这种情况下，你可以使用原生 JS 来查找容器内 div 的个数。

$(document).ready(function(){

  console.log($("#container div").length);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

  <div v-if=condition>
   Component1
  </div>

  <div v-if=condition>
   Component2
  </div>

  <div v-if=condition>
   Component3
  </div>

  <div v-if=condition>
   Component 4
  </div>
 </div>

【讨论】：