Подскажите,как правильно собирать элементы принадлежащие к определённой группе. Есть некая 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>
Подскажите как правильно пробежаться по дереву, буду так же рад ссылкам на пример или статью.
Я нашёл решение, для поиска внутри конкретного элемента я использовал $(this).parent().find(".valTags").each(function (){})
- это позволило собирать данные именно внутри текущего родительского элемента.
Коряво, жуть, но вроде работает :-)
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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Столкнулся с такой проблемой: есть строка, в который лежит разметка таблицыНеобходимо её (таблицу) отправить пользователю через FB-бота