CODEWITHSUNDEEP
javascripthtmljquery
d.s
d.s

Reputation: 33

JQuery Selectors: How to select item with class and id

I am trying to select div with class(.multi-steps-content section) inside div with id(#box-1). I want to count number of section using combination of id and class, but on this way i can't to get valid number of section, because i don't know how to combination id with class.

This is my code:

var $divID = $('div.multi-steps-wrapper').attr('id');

var $length = $(" " + $divID + " .multi-steps-content section").length;
console.log($length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container-multi-steps">
  <div id="box-1" class="multi-steps-wrapper">
    <div class="multi-steps-content">
      <form action="" id="form-property">

        <section>1</section>
        <section>2</section>
        <section>3</section>

      </form>
    </div>
    <!--.multi-steps-content-->
  </div>
  <!--.multi-steps-wrapper-->
</div>

<div id="box-2" class="multi-steps-wrapper">
  <div class="multi-steps-content">
    <form action="" id="form-property">

      <section>1</section>
      <section>2</section>
      <section>3</section>

    </form>
  </div>
  <!--.multi-steps-content-->
</div>
<!--.multi-steps-wrapper-->
</div>

Upvotes: 0

Views: 48

Answers (1)

mplungjan
mplungjan

Reputation: 177940

Perhaps this?

$('div.multi-steps-content').each(function() {
  console.log($(this).closest(".multi-steps-wrapper").attr("id"), $(this).find("section").length)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container-multi-steps">
  <div id="box-1" class="multi-steps-wrapper">
    <div class="multi-steps-content">
      <form action="" id="form-property">

        <section>1</section>
        <section>2</section>
        <section>3</section>

      </form>
    </div>
    <!--.multi-steps-content-->
  </div>
  <!--.multi-steps-wrapper-->
</div>

<div id="box-2" class="multi-steps-wrapper">
  <div class="multi-steps-content">
    <form action="" id="form-property">

      <section>1</section>
      <section>2</section>
      <section>3</section>

    </form>
  </div>
  <!--.multi-steps-content-->
</div>
<!--.multi-steps-wrapper-->
</div>

Lookup:

const content = {}
$('div.multi-steps-content').each(function() {
  content[$(this).closest(".multi-steps-wrapper").attr("id")] = $(this).find("section").length
})
console.log("Step 1 has",content["box-1"],"steps")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container-multi-steps">
  <div id="box-1" class="multi-steps-wrapper">
    <div class="multi-steps-content">
      <form action="" id="form-property">

        <section>1</section>
        <section>2</section>
        <section>3</section>

      </form>
    </div>
    <!--.multi-steps-content-->
  </div>
  <!--.multi-steps-wrapper-->
</div>

<div id="box-2" class="multi-steps-wrapper">
  <div class="multi-steps-content">
    <form action="" id="form-property">

      <section>1</section>
      <section>2</section>
      <section>3</section>

    </form>
  </div>
  <!--.multi-steps-content-->
</div>
<!--.multi-steps-wrapper-->
</div>

Upvotes: 1

Related Questions