Question 11035 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery all children of a child has class

im trying to run a function once all children of a child has a specific class, here is my code so far, i have tinkered with this a quite a bit in various ways but can’t seem to get it to work.

#section-1 is the parent

.job-row-wrapper is the child of above

.checkbox is the child of above

once all .checkbox has class of checked added — do something

  <!-- SECTION 1 -->
  <div class="section-wrapper" id="section-1">
    <div class="job-row-wrapper-header" id="header-1">section title goes here</div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>

  </div>

 
 if ($("#section-1 > .job-row-wrapper > .check-box > .checked").length) {
 console.log("All checkboxes have the  class checked");
 }
Tags:

2

Answers


  1. 0 
    const $allCheckboxes = $("#section-1 > .job-row-wrapper > .check-box");
const $allCheckedCheckboxes = $("#section-1 > .job-row-wrapper > .check-box.checked");

if ($allCheckboxes.length === $allCheckedCheckboxes.length) {
  console.log("All checkboxes have the class checked");
}
    Login or Signup to reply.
  2. 0 
    const $checkboxes = $("#section-1>.job-row-wrapper>.check-box");
const $checkedcheckboxes = $("#section-1>.job-row-wrapper>.check-box .checked");

if ($checkboxes.length ==$checkedcheckboxes.length) {
  console.log("All Checkboxes Have the Class Checked"); /////prints when all checkboxes are checked
} else{
console.log($checkedcheckboxes.length);  ///////count how many checkbox is checked
console.log("All Checkboxes Are Not Checked");
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- SECTION 1 -->
  <div class="section-wrapper" id="section-1">
    <div class="job-row-wrapper-header" id="header-1">section title goes here</div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box">
      <div class="checked"></div>
      </div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box">
      <div class="checked"></div>
      </div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box">
      <div class="checked"></div>
      </div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box">
      <div class="checked"></div>
      </div>
    </div>

  </div>
    const $checkboxes = $("#section-1>.job-row-wrapper>.check-box");
const $checkedcheckboxes = $("#section-1>.job-row-wrapper>.check-box .checked");

if ($checkboxes.length ==$checkedcheckboxes.length) {
  console.log("All Checkboxes Have the Class Checked"); /////prints when all checkboxes are checked
} else{
console.log($checkedcheckboxes.length);  ///////count how many checkbox is checked
console.log("All Checkboxes Are Not Checked");
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- SECTION 1 -->
  <div class="section-wrapper" id="section-1">
    <div class="job-row-wrapper-header" id="header-1">section title goes here</div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box">
      </div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>
    <div class="job-row-wrapper">
      <div class="job-row-column">title goes here</div>
      <div class="check-box"></div>
    </div>

  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search