Поиск потомков конкретного элемента jQuery

180
31 июля 2018, 11:30

Подскажите,как правильно собирать элементы принадлежащие к определённой группе. Есть некая HTML-структура типа

<div class="sub-group">
<div class="add_protokol_redact_add-sub-group">
    <div class="sub-group_pos">
        <input class="name-bool  pos_name_sub" readonly="" value="Позиция1" 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="1" readonly="" value="1">
                        </div>
                    </div>
                    <div class="valTags-content">
                        <div class="valTags-main">
                            <input class="valTags tags_add_label" size="1" readonly="" value="2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Мне надо собрать для каждого sub-group значения valTags в группы для каждого sub-group_pos ( количество элементов с классом sub-group_pos от 1 до n) но при сборе у меня получается что я собираю все значения valTags и записываю их значения для каждого из sub-group_pos.

$(document).on('click', '.edit_priem_head_save button', function() { 
  var page = {}; 
  var page_des = {}; 
  var name_page = $('.add_protokol_add_name_input').val(); 
  var description_page = $('input.add_protokol_description_name_input').val(); 
  page_des.protokol_name = name_page; 
  page_des.protokol_description = description_page; 
  var spes_value = []; 
  var tags_mas = []; 
 
 
  var protocol = { 
    'protocol': { 
      'protocol_descr': {}, 
      'protocol_body': [] 
    } 
  }; 
 
 
 
  $('.add_protokol_add_specialist_tag-order').find('.active_tab').each(function() { 
    spes_value += $(this).text() + ","; 
  }); 
 
 
  page_des.protocol_access = spes_value; 
  page.protokol_description = page_des; 
  //steps 
 
  $(".sub-group").each(function() { 
    var group = { 
      'group': [] 
    }; 
    var nameGroup = []; 
    $(".add_protokol_redact_add-sub-group").each(function() { 
      $(".sub-group_pos").each(function() { 
        var submass = { 
          'group_name': 'name', 
          'position': [] 
        }; 
        $(".group_names").each(function() { 
 
 
          //pos_name_sub 
 
        }); 
        $(this).parent().find(".pos_name_sub").each(function() { 
          var data_type = $(this).attr('data-type'); 
 
          var textTags = []; 
 
 
          switch (data_type) { 
            case 'tags': 
              console.log("ДАЭТО КЭЙС!!"); 
 
              $(this).parent().find(".valTags").each(function() { 
                textTags = $(this).val(); 
                var mark = 'false'; 
                var optional = 'true'; 
                var mass_one = { 
                  'value': textTags, 
                  'mark': mark, 
                  'optional': optional 
                }; 
 
                submass.position.push(mass_one); 
 
                //    tags_mas.push(mass_one); 
              }); 
 
              break; 
 
          } 
          group.group.push(submass); 
 
 
 
 
        }); 
 
        submass = null; 
      }) 
    }); 
    protocol.protocol.protocol_body.push(group); 
 
 
    summTask = nameGroup; 
  }); 
 
 
  console.log("Массивы:", protocol /*tags_mas*/ ); 
  /* 
   var data_json={ "protocol": { "protocol_descr": { "protocol_name": "test" },"protocol_body":[ {"group": {"group_name": "test group","position_info": { "position_name": "1", "position_type": "tags","position_value": "some,value", "data-free":"false","data-type":"false","data-optional":"false"}}}]}}; 
       data_json.protocol.protocol_body.push({ "group": {"group_name": "test group",  "position_info": {"position_name": "2","position_type": "tags2", "position_value": "some,value2", "data-free":"false","data-type":"false", "data-optional":"false"  }}}); 
    //   console.log(data_json); 
    * */ 
 
})
<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="п1" 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="2" readonly="" value="м1"> 
              </div> 
            </div> 
            <div class="valTags-content"> 
              <div class="valTags-main"> 
                <input class="valTags tags_add_label" size="2" readonly="" value="м2"> 
              </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 class="sub-group_pos"> 
      <input class="name-bool  pos_name_sub" readonly="" value="п2" 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="2" readonly="" value="м3"> 
              </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 1

Я нашёл решение, для поиска внутри конкретного элемента я использовал $(this).parent().find(".valTags").each(function (){}) - это позволило собирать данные именно внутри текущего родительского элемента.

Answer 2

Коряво, жуть, но вроде работает :-)

let found = $(".sub-group").find($(".sub-group_pos"));//Получаем массив .sub-group, с элементами с наличием класса .sub-group_pos 
//console.log(found);//массив в консоли 
let indexed = found.each(function() { 
	this[0] = $(this).find($('.valTags')); 
});//каждый элемент становится массивом, в котором первым элементом будет массив элементов класса .valTags  
//console.log(indexed);//массив в консоли 
indexed.each(function () { 
	this[0].each(function () { 
		console.log($(this).val());// в каждом первом элементе массива собираем значения элементов и в консоль 
	}); 
}); 
//Если требуется найти значения только, к примеру пятнадцатого элемента,то  
// функция будет вроде: 
// function valTagsIndexedElement (number) { 
// 	indexed[number][0].each(function () { 
// 		console.log($(this).val()) 
// 	}); 
// }; 
// valTagsIndexedElement (1);
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<div class="sub-group"> 
  <div class="add_protokol_redact_add-sub-group"> 
    <div class="sub-group_pos"> 
       <input class="name-bool  pos_name_sub" readonly="" value="Позиция1" 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="1" readonly="" value="14"> 
                      </div> 
                      <div class="valTags-main"> 
                        <input class="valTags tags_add_label" size="1" readonly="" value="1"> 
                      </div> 
                      <div class="valTags-main"> 
                        <input class="valTags tags_add_label" size="1" readonly="" value="1"> 
                      </div> 
                   </div> 
                   <div class="valTags-content"> 
                     <div class="valTags-main"> 
                       <input class="valTags tags_add_label" size="1" readonly="" value="2"> 
                     </div> 
                   </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <div class="sub-group_pos"><input class="valTags tags_add_label" size="1" readonly="" value="2"></div> <!--проверочный блок --> 
  </div> 
</div>

READ ALSO
Объединение запросов MySQL + group by

Объединение запросов MySQL + group by

Есть таблица звонков:

197
Как совместить эти три запроса (SQL)?

Как совместить эти три запроса (SQL)?

Как совместить эти запросы в один?

174
Таблица html в изображение

Таблица html в изображение

Столкнулся с такой проблемой: есть строка, в который лежит разметка таблицыНеобходимо её (таблицу) отправить пользователю через FB-бота

151