jQuery карта на основе значения атрибута и сортировки

Question

Я пытаюсь отсортировать блоки foo по порядку arr:

 var arr = [11,33,6,44]

 var parent = $('.parent')

var items = parent.children('.foo')

 <div class="parent">
    <div class="foo" data-media-id="6"></div>
    <div class="foo" data-media-id="11"></div>
    <div class="foo" data-media-id="33"></div>
    <div class="foo" data-media-id="44"></div>
 </div>

 parent.append($.map(arr, function(v) {
    return items.attr('data-media-id="'+v+'"');
 }));

Если есть более эффективный способ, я хотел бы знать.

Answer 1

.attr() устанавливает или возвращает значение атрибута, поэтому в данном случае это вам не поможет.

Вместо этого вы хотите .filter(), который выбирает все элементы коллекции, которые соответствуют заданному селектору или проходят проверку функции. Объедините это с селектором атрибутов ('[data-media-id="..."]'), и вы почти закончили.

Последний шаг - исправить разметку, поэтому div.parent является фактическим родительским элементом .foo элементы

var arr = [11, 33, 6, 44]

var parent = $('.parent')
var items = parent.children('.foo')

parent.append($.map(arr, function(v) {
  return items.filter('[data-media-id="' + v + '"]');
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="foo" data-media-id="6">6</div>
  <div class="foo" data-media-id="11">11</div>
  <div class="foo" data-media-id="33">33</div>
  <div class="foo" data-media-id="44">44</div>
</div>