Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2016, 16:05
Аватар для re.void
Новичок на форуме
Отправить личное сообщение для re.void Посмотреть профиль Найти все сообщения от re.void
 
Регистрация: 30.03.2016
Сообщений: 7

Сравнить содержимое 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>
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2016, 16:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,976

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
        })
    })
});
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2016, 18:25
Аватар для re.void
Новичок на форуме
Отправить личное сообщение для re.void Посмотреть профиль Найти все сообщения от re.void
 
Регистрация: 30.03.2016
Сообщений: 7

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

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


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();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не получается вложить один эффект в другой svip Библиотеки/Тулкиты/Фреймворки 1 30.03.2008 10:07