Перебор содержимого внутри всех div

248

28 мая 2018, 12:30

Подскажите,как правильно реализовать перебор содержимого всех div с одинаковым классом. Например есть следующая структура:

    <div class="sub-group">
    <input class="name-bool group_names" value="1" readonly="" data-optional="false">
    <div class="sub_del">✖</div>
    <div class="sub_add">+ Подгруппа</div>
    <div class="sub-group_add">+ Позиция</div>
    <div class="add_protokol_redact_add-sub-group">
        <div class="sub-group_pos">
            <input class="name-bool  pos_name_sub" readonly="" value="11" data-free="false" data-few="false" data-type="tags"
                data-optional="false">
            <div class="sub-group_add_input">
                <div class="sub-group_add_input_tags">
                    <div class="create_tags_input">
                        <div class="valTags-content">
                            <div class="valTags-main">
                                <input class="valTags tags_add_label" size="3" readonly="" value="113">
                            </div>
                        </div>
                        <div class="valTags-content">
                            <div class="valTags-main">
                                <input class="valTags tags_add_label" size="3" readonly="" value="113">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="edit_priem_template_string_add plus" style="float: none; width: 20px; height: 26px; padding-left: 2px;">
                    <p class="edit_priem_template_string_add_span" style="float: none;">➕</p>
                </div>
                <div class="sub_del_pos">✖</div>
            </div>
        </div>
    </div>
    <div class="add_protokol_redact_add-sub-group_content"></div>
</div>

Таких структур может быть N, с каждого div с классом .sub-group мне надо получить значения элементов,к примеру, с классами .name-bool group_names, name-bool group_names и valTags tags_add_label. Какой путь будет более менее правильный переберать через children Или find?

Answer 1

var $subGroups = $('.sub-group'), 
  reachingInputs = []; 
 
$subGroups.each(function(idx, el) { 
 
  var inputs = $(el).find('input'); 
 
  inputs.each(function(idx, el) { 
 
    reachingInputs.push("{" + $(el).attr('class') + ":" + $(el).val() + "}"); 
 
  }); 
 
}); 
 
 
console.log(reachingInputs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="sub-group"> 
  <input class="name-bool group_names" value="1" readonly="" data-optional="false"> 
  <div class="add_protokol_redact_add-sub-group"> 
    <div class="sub-group_pos"> 
      <input class="name-bool  pos_name_sub" readonly="" value="11" data-free="false" data-few="false" data-type="tags" data-optional="false"> 
      <div class="sub-group_add_input"> 
        <div class="sub-group_add_input_tags"> 
          <div class="create_tags_input"> 
            <div class="valTags-content"> 
              <div class="valTags-main"> 
                <input class="valTags tags_add_label" size="3" readonly="" value="113"> 
              </div> 
            </div> 
            <div class="valTags-content"> 
              <div class="valTags-main"> 
                <input class="valTags tags_add_label" size="3" readonly="" value="113"> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div class="edit_priem_template_string_add plus" style="float: none; width: 20px; height: 26px; padding-left: 2px;"> 
          <p class="edit_priem_template_string_add_span" style="float: none;">➕</p> 
        </div> 
        <div class="sub_del_pos">✖</div> 
      </div> 
    </div> 
  </div> 
  <div class="add_protokol_redact_add-sub-group_content"></div> 
</div>

Answer 2

Реализовать можно совершенно по-разному. Все зависит от задачи...

Например, вот так можно собрать значения в массив объектов:

let results = [];
for (let sg of document.querySelectorAll('.sub-group')) {
  results.push({
    nb_gn : sg.querySelector('.name-bool.group_names').value, 
    nb_pns: sg.querySelector('.name-bool.pos_name_sub').value, 
    vt_tal: sg.querySelector('.valTags.tags_add_label').value
  });
}