How to check if siblings row exists or not jquery

Question

I have multiple rows of Class and student, these are being generated dynamically, there may or may not be rows with class student which are sibling to a class, i want to count number of rows with class student after a particular Class using a jquery in side a foreach loop.

jQuery('.class').each(function(e) {
      // count number of student after each class row
 });

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

<div class="row clearfix class">
  <div class="form-group">
    <h5 class="card-inside-title">Class</h5>
    <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
      <option value="">Select</option>
      <option value="1">Intermediate</option>
      <option value="2">High School</option>
    </select>
  </div>
</div>

<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 1</h5>
   </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 2</h5>
   </div>
</div>


<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h5 class="card-inside-title">Class</h5>
      <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Intermediate</option>
        <option value="2">High School</option>
      </select>
    </div>
  </div>
  
  <div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 1</h5>
   </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 2</h5>
   </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 3</h5>
   </div>
</div>

<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h5 class="card-inside-title">Class</h5>
      <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Intermediate</option>
        <option value="2">High School</option>
      </select>
    </div>
  </div>

Why has the first class 2 students as siblings and the second class 3 students as childs? — Sascha, Aug 05 '20 at 16:15

score 1 · Accepted Answer · answered Aug 05 '20 at 16:15

Use .nextUntil() to get all the .student elements until the next .class. For the last class, it will return all the remaining students.

Your HTML has an error, one of the .class DIVs was missing </div>, so the students were nested inside rather than after it.

jQuery('.class').each(function(e) {
  var students = $(this).nextUntil(".class", ".student").length;
  var classname = $(this).find("h5").text();
  console.log(`Class: ${classname}, students = ${students}`);
});

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

<div class="row clearfix class">
  <div class="form-group">
    <h5 class="card-inside-title">Class 1</h5>
    <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
      <option value="">Select</option>
      <option value="1">Intermediate</option>
      <option value="2">High School</option>
    </select>
  </div>
</div>

<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 1</h5>
  </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 2</h5>
  </div>
</div>


<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h5 class="card-inside-title">Class 2</h5>
      <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Intermediate</option>
        <option value="2">High School</option>
      </select>
    </div>
  </div>
</div>

<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 1</h5>
  </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 2</h5>
  </div>
</div>
<div class="row clearfix student">
  <div class="form-group">
    <h5 class="card-inside-title">Student 3</h5>
  </div>
</div>

<div class="row clearfix class">
  <div class="col-sm-3">
    <div class="form-group">
      <h5 class="card-inside-title">Class 3</h5>
      <select name="input" class="form-control show-tick check_valid" aria-invalid="false">
        <option value="">Select</option>
        <option value="1">Intermediate</option>
        <option value="2">High School</option>
      </select>
    </div>
  </div>
</div>

Hey, @Barmar, you beat me to it by 7 seconds, and I haven't even started with the explanations, which would have been exactly the same as yours! :D — Carsten Massmann, Aug 05 '20 at 16:16
@cars10m It's not the same ;) Barmer also fixed the markup (hence the `filter` selector in the `.nextUntil()` call otherwise the last "class" would also have "students") — Andreas, Aug 05 '20 at 16:18
That is true - I "fixed" it in my solution in a different way by adding the closing `` in the markup, assuming it was unintentionally left out. — Carsten Massmann, Aug 05 '20 at 16:21
That's what I did as well, because I was getting incorrect results first. — Barmar, Aug 05 '20 at 16:22
Well, something to have a good laugh about anyway! I will remove my redundant answer then ;-) — Carsten Massmann, Aug 05 '20 at 16:23

How to check if siblings row exists or not jquery

1 Answers1