JQuery получить дочерние все атрибуты данных - PullRequest
Новая
       36

JQuery получить дочерние все атрибуты данных

0 голосов
/ 17 марта 2020

У меня есть следующий список: 

<ul>
    <li>
        <div class="click">
            <span>click here</span>
        </div>
        <ul>
            <li data-dataAttribute="1"></li>
            <li data-dataAttribute="3"></li>
            <li data-dataAttribute="7"></li>
        </ul>
    </li>
</ul>

В этом случае я хочу получить все элементы данных ниже ul в отдельных li элементах и ​​добавить их в список.

Я пробовал следующее: 

$("#fileSystem").on('click', '.click', function () {
    var attributes = $(this > 'ul').children().data('dataAttribute');
    debugger;
});

Это, однако, не работает, что я не могу решить. Я подозреваю, что это может быть связано с селектором.

Ответы [ 2 ]

1 голос
/ 17 марта 2020

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

$("> ul", this)
$(this).find("ul")

В вашем обработчике кликов, this будет div "click here". Селектор, использующий >, означает поиск дочерних элементов, но в вашем HTML ul не является дочерним элементом this (нажмите здесь), поэтому не будет работать.

нужно найти следующий ul, а не дочерний элемент ul и > для этого не используется.

Если ul является следующим элементом, то вы можно использовать простой .next(), в противном случае вам нужно будет найти его, используя другой метод.

Затем вы можете извлечь данные, используя .map

Обратите внимание, что data-xyz должно быть в нижнем регистре иначе $("li").data("xyz") не найдет его.

Если сложить их вместе, вы получите: 

$(document).on("click", ".click", function() {
    var data = $(this).next().find("li").map(function() { 
        return $(this).data("dataattribute")}
    ).toArray()
    console.log(data)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
        <div class="click">
            <span>click here</span>
        </div>
        <ul>
            <li data-dataattribute="1"></li>
            <li data-dataattribute="3"></li>
            <li data-dataattribute="7"></li>
        </ul>
    </li>
</ul>
0 голосов
/ 17 марта 2020

Попробуйте карту:

Обратите внимание, что ваши атрибуты данных ДОЛЖНЫ быть все в нижнем регистре 

$(function() {
  $("#fileSystem").on('click', '.click', function() {
    const list = $(this)
        .closest("li") // or .next()
        .find("ul>li[data-dataattribute]")
        .map((i,li) => $(li).attr("data-dataattribute")).get()
    console.log(list)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fileSystem">
  <ul>
    <li>
      <div class="click">
        <span>click here</span>
      </div>
      <ul>
        <li data-dataattribute="1"></li>
        <li data-dataattribute="3"></li>
        <li data-dataattribute="7"></li>
      </ul>
    </li>
  </ul>
</div>
...