Сравнить содержимое div'ов по data-id, совпадающие вложить в один из них.
Всем хорошего дня!)
Есть несколько дивов, одинакового класса, но он мне не известен, и формируется на лету. Необходимо найти одинаковые блоки и вложить все в один. Порядок не имеет значения. Отбор предлагается сделать по некоторым переменным, которые мне дает функция. Например:
<div class='cib-tile-elem'>
<div class="label-field" data-id ="s12"><div class ="field1"></div>
<div class="label-field" data-id ="s12"><div class ="field1"></div>
<div class="label-field" data-id ="d14"><div class ="field3"></div>
<div class="label-field" data-id ="s12"><div class ="field1"></div>
<div class="label-field" data-id ="f38"><div class ="field5"></div>
<div class="label-field" data-id ="f32"><div class ="field6"></div>
<div class="label-field" data-id ="s12"><div class ="field1"></div>
<div class="label-field" data-id ="d14"><div class ="field3"></div>
</div>
var classes = $(".cib-tile-elem")
var dataid = $(this['data-id']).map(function(elem) {});
var countSes = elem.length;
cache = {};
for (var i = 0; i < countSes; ++i) {
var dataId = elem[i].dataset.id;
if (cache[dataId]) {
console.log(`найдено совпадение: ` + cache);
}
else cache[dataId] = elem[i];
}
Я не могу понять, как пробежаться по массиву div'ов (elem), и выбрать те, в которых data-id одинаков. С jquery знаком не больше недели, а решение необходимо. data-id мне, по сути, не известен, он формируется функцией и зависит от того, что она присвоит.
//конечная разметка должна выглядеть примерно так:
<div class='cib-tile-elem'>
<div class="label-field" data-id ="s12"><div class ="field1"><div class ="field1"><div class ="field1"></div>
<div class="label-field" data-id ="d14"><div class ="field3"><div class ="field3"></div>
<div class="label-field" data-id ="f38"><div class ="field5"></div>
<div class="label-field" data-id ="f32"><div class ="field6"></div>
</div>
|
re.void,
$(function() {
var classes = $(".cib-tile-elem");
classes.each(function(indx, el) {
var dataid = $("[data-id]", el),
obj = {};
dataid.each(function(indx, elem) {
var id = $(elem).data("id");
elem = $(elem);
obj[id] ? (obj[id].append(elem.html()), elem.remove()) : obj[id] = elem
})
})
});
|
рони,
Спасибо за ответ. Реально помог. Также есть вот такое решение, возможно будет кому полезное
var container = $(".cib-tile-elem");
Object.keys($(".cib-label-field").map(function() { // берем все data-id
return $(this).data('id');
}).toArray().reduce(function(acc, cur) { // сохраняем уникальные
if (!acc[cur]) acc[cur] = true;
return acc;
}, {}))
.forEach(function(el) { // бежим по уникальным data-id
$('[data-id=' + el + ']') // выбирам все элементы с таким data-id
.children() // берем у них детей
.appendTo($('[data-id=' + el + ']:eq(0)')); //добавляем первому элементу
});
// удаляем если надо пустые, если не надо строчку можно убрать/закомментировать
$(".cib-label-field:not(:has(div))").remove();
|
| Часовой пояс GMT +3, время: 02:30. |