CODEWITHSUNDEEP
javascripthtmlcssvue.js
FloHaberfellner
FloHaberfellner

Reputation: 37

How to count <div> with Javascript

Hey guys I have a problem with my code. I have one main component where I have different sub components like this:

<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>

The v-if is because i only want to render one component in the frontend step by step. So when I start my application, I only show the first component, when I click on next, I show the second component and so on.

Now I want a page indicator, so I have to count the child div tags of "container". For that I already tried these options:

  1. var count = $("#container div").length; //returns 0

  2. var count2 = $("#container").children().length; //returns 2

That results are false because the real result would be 4 because there are 4 children div. I think the problem is, that the other components are not all rendered but how can I solve this problem?

Upvotes: 0

Views: 1218

Answers (3)

Prem Singh
Prem Singh

Reputation: 419

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>

Upvotes: 0

dave
dave

Reputation: 2901

Given that you're using Vue, I would use a counter in your data object to keep track of where you are, then just increment it when you click a button to proceed to the next step:

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>

Upvotes: 3

Abin Thaha
Abin Thaha

Reputation: 4633

Checked the same, but it seems working for me.

Probably you need to check the length after the document is ready. I mean in the mounted lifecycle method.

But using jQuery inside another library is not a better way of doing it unless there is no alternative.

So in this case, you can use native JS to find the number of div's inside the container.

$(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>

Upvotes: -1

Related Questions