Сравнить содержимое 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, время: 16:53. |