Как получить массив аттрибутов из динамического блока?

Question

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

let array = [3,2,4,1]; // Получить массив аттрибутов data-id

console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Answer 1

Соберем все div вместе и в цикле пробежимся. Все заполненные data-id добавляем в результирующий массив:

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

let array = []; // Получить массив аттрибутов data-id

const divs = $('div');
for (div of divs) {
    if (div?.dataset?.id) array.push(div.dataset.id)
}

console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Через встроенные методы jQuery

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

let array = []; // Получить массив аттрибутов data-id

const divs = $('div');

divs.each((i, e) => {
  if(e?.dataset?.id) {
    array.push(e.dataset.id)
  }
})

console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Answer 2

Есть как минимум два способа это сделать, первый, через селекторы:

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

let array = [3,2,4,1]; // Получить массив аттрибутов data-id
let elements = []

array.forEach(e => {
  elements.push($(`[data-id="${e}"]`))
})

elements.forEach(e => {
  console.log(e.data('id'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

И второй, используя reduce:

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

let array = [3,2,4,1]; // Получить массив аттрибутов data-id
let elements = array.reduce((acc, e) => {
  acc.push($(`[data-id="${e}"]`))
  return acc
}, [])

elements.forEach(e => {
  console.log(e.data('id'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Answer 3

$('.container').html(`
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="4">4</div>
<div data-name="test">test</div>
<div data-id="1">1</div>
<div>25</div>
`);

array = [];
$(".container div[data-id]").each((_,el) => array.push(el.getAttribute("data-id")));
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

БЛОГ НА HUSL

Как получить массив аттрибутов из динамического блока?

Ответы (3 шт):

Через встроенные методы jQuery