There are several divs of the same class, but he is not known to me, and is formed on the fly. It is necessary to find the same blocks and put one in the other. The order does not matter.
It is proposed to make a selection for some variables that the function gives me.
For example:

<div class='cib-tile-elem'> <div class="cib-label-field" data-id ="12"><div class ="field"></div> <div class="cib-label-field" data-id ="12"><div class ="field"></div> <div class="cib-label-field" data-id ="14"><div class ="field"></div> <div class="cib-label-field" data-id ="12"><div class ="field"></div> <div class="cib-label-field" data-id ="38"><div class ="field"></div> <div class="cib-label-field" data-id ="32"><div class ="field"></div> <div class="cib-label-field" data-id ="12"><div class ="field"></div> <div class="cib-label-field" data-id ="14"><div class ="field"></div> </div> //конечная разметка должна выглядеть примерно так: <div class='cib-tile-elem'> <div class="cib-label-field" data-id ="12"><div class ="field"><div class ="field"><div class ="field"></div> <div class="cib-label-field" data-id ="14"><div class ="field"></div> <div class="cib-label-field" data-id ="12"><div class ="field"></div> <div class="cib-label-field" data-id ="38"><div class ="field"></div> <div class="cib-label-field" data-id ="32"><div class ="field"></div> <div class="cib-label-field" data-id ="14"><div class ="field"></div> </div>

We need a script that runs through the generated page, finds the same divs and puts them into each other.

Here is my code:

  var classes = $(".cib-tile-elem") var dataid = $(this['data-id']).map(function(elem) {}); var countSes = elem.length; console.log("dataid:", elem, countSes) var cache; for (var i = 0; i < countSes; ++i) { cache = elem[i]; if (cache == elem[i]) { console.log(`найдено совпадение: ` + cache); } }

I can't figure out how to run through the array of divs ( elem ), and choose those in which the data-id same. With jquery familiar no more than a week, but a solution is necessary data-id is, in fact, unknown to me; it is formed by a function and depends on what it assigns.

  • one
    Well, what's the question? If you write the script yourself and you have any difficulties, then lay out the code and description of the error. If you expect to be completely written for you, then I recommend to apply to the freelance exchange. - Nick Volynkin ♦
  • I am writing myself. It is only necessary to push where the exit of the three pines! I clearly understand that I do not see at close range. But I can not see from this. Script (try, posted. - re_void
  • Ah, so much better already. - Nick Volynkin ♦
  • For html / css / js code, you can use the built-in editor. And please format the code before inserting it into the question to make it easy to read. (Anyway, format the code). :) - Nick Volynkin ♦
  • What markup should the result be for the example of the question? - Grundy

2 answers 2

One solution:

  1. find out a list of unique data-id
  2. run through them choosing all the children of the elements with such a data-id
  3. add them first
  4. optional - remove empty items

Example:

 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(); 
 .cib-label-field { overflow: hidden; } div.field { float: left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='cib-tile-elem'> <div class="cib-label-field" data-id="12"> <div class="field">12</div> </div> <div class="cib-label-field" data-id="12"> <div class="field">12</div> </div> <div class="cib-label-field" data-id="14"> <div class="field">14</div> </div> <div class="cib-label-field" data-id="12"> <div class="field">12</div> </div> <div class="cib-label-field" data-id="38"> <div class="field">38</div> </div> <div class="cib-label-field" data-id="32"> <div class="field">32</div> </div> <div class="cib-label-field" data-id="12"> <div class="field">12</div> </div> <div class="cib-label-field" data-id="14"> <div class="field">14</div> </div> </div>

  • Thank you, an interesting option, I came up more than others! - re_void

When referring to the data-attributes, I advise you to read this short article here https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Using_data_attributes , as well as this https://developer.mozilla.org / en / docs / Web / API / Element / getAttribute

There is another function of jQuery itself (it also seems that getAttribute was called, I don’t remember already)

Secondly, cache = elem[i]; if (cache == elem[i]) cache = elem[i]; if (cache == elem[i]) is something like a=3; if(a==3) a=3; if(a==3) - here you can not even compare, if you assigned the value = D

You will not write a ready solution, because you are just learning and thinking about some solutions to the ray yourself, but I will tell you one of the possible solutions:

before the loop, create an empty object (say, cache = {}; ). In this case, it can be used as an associative array.

By the way, regarding the design of the cycle, you are a little too smart, it seems to me - read about the choice of selectors, the daughter elements and the cycle each

In a loop, let's say you already got a data-id, somehow, dataId = elem[i].dataset.id; (by the way, ideally, it is better to compare the elements not only by data-id) Check whether this object already exists in the cache ( if(cache[dataId]) ) - if not, add cache[dataId] = elem[i]; if there is - add a child to it (the append or appendChild - depending on how you will do it). If you want them to nest each other with a matryoshka (rather than stuffing all data-id = 12 into one data-id = 12), then in the second case, after working with append , assign cache[dataId]=elem[i];

  • $(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