1

Подскажите,как правильно собирать элементы принадлежащие к определённой группе. Есть некая 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>

Подскажите как правильно пробежаться по дереву, буду так же рад ссылкам на пример или статью.

2 ответа 2

1

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

0

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.