JQuery Selectors: How to select item with class and id

Question

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>

Answer 1

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>