Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Сравнить содержимое div'ов по data-id, совпадающие вложить в один из них. (https://javascript.ru/forum/events/62209-sravnit-soderzhimoe-div%27ov-po-data-id-sovpadayushhie-vlozhit-v-odin-iz-nikh.html)

re.void 30.03.2016 16:05

Сравнить содержимое 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>

рони 30.03.2016 16:47

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
        })
    })
});

re.void 06.04.2016 18:25

рони,
Спасибо за ответ. Реально помог.

Также есть вот такое решение, возможно будет кому полезное


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, время: 03:01.