Блог

Главная - Вопросы по программированию - Jquery: цикл на дочерних элементах на основе родительского класса

Jquery: цикл на дочерних элементах на основе родительского класса

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

у меня есть структура формы, как показано ниже :

  1. Каждый требуемый элемент в качестве родительского класса is_required
  2. Дочерний класс имеет специфичное для элемента имя класса, например checkbox_required или radio_required и т. Д.

я хочу выполнить цикл для всех элементов внутри is_required класса, а затем на основе подкласса выполнить требуемую проверку. Моя проблема в том, что я не могу выбрать дочерний класс:

 <div class="col-md-3">
   <div class="form-group is_required">
      <label>radio button</label><br>
      <div class="radio_required">
         <input type="radio" name="radio_button" value="1">1
         <input type="radio" name="radio_button" value="2">2
         <input type="radio" name="radio_button" value="3">3
      </div>
   </div>
</div>

<div class="form-group is_required">
   <label>checkboxes</label><br>
   <div class="checkbox_required"> 
      <input type="checkbox" name="checkboxes[]" value="one">one
      <input type="checkbox" name="checkboxes[]" value="two">two 
      <input type="checkbox" name="checkboxes[]" value="three">three
   </div>
</div>

я перебираю все эти элементы, как показано ниже

 $(".is_required").each(function() {       
        var div = $(this) " > div";// Not sure how will i get the div here need to get radio_required, checkboxe_required etc 
})

может кто-нибудь посоветовать мне, как я могу этого добиться

Комментарии:

1. Вы могли бы сделать var ele = $("> div > *", this);

2. Ваша попытка была бы: $(".is_required").each(function() { var childitems = $(this).find(">div") но вы также могли бы сделать $(".is_required > div") и пропустить первое .each — может быть, лучше сделать $(".is_required>.radio_required,.is_required>.checkbox_required") , чтобы получить их конкретно. Однако проверка, вероятно, будет отличаться внутри каждого, поэтому вам нужно if ($(this).is(".checkbox_required")... , чтобы вы могли также выполнять их как отдельные проверки: $(".is_required>radio_required").each... и $(".is_required>checkbox_required").each...

3. @freedomn-m = $(this).find(«> div») это работает

Ответ №1:

Попробуйте использовать следующий код

     $(".is_required").each(function() {   
          var element = $(this);
          //Loop all children elements of current element
           $(element).children().each(function () {
            if($(this).hasClass("checkbox_required")){
                var checkboxElement = $(this);
                console.log($(checkboxElement).attr("class"));
            }
            else if($(this).hasClass("radio_required")){
                var radioElement = $(this);
                console.log($(radioElement).attr("class"));
            }
        });
    }) 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="col-md-3">
       <div class="form-group is_required">
          <label>radio button</label><br>
          <div class="radio_required">
             <input type="radio" name="radio_button" value="1">1
             <input type="radio" name="radio_button" value="2">2
             <input type="radio" name="radio_button" value="3">3
          </div>
       </div>
    </div>

    <div class="form-group is_required">
       <label>checkboxes</label><br>
       <div class="checkbox_required"> 
          <input type="checkbox" name="checkboxes[]" value="one">one
          <input type="checkbox" name="checkboxes[]" value="two">two 
          <input type="checkbox" name="checkboxes[]" value="three">three
       </div>
    </div>