Question

我有一堆动态创建的项目，用户可以选择。在这种情况下，添加“选定”类。

<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>

如何获取所有具有“选定”类的元素的id？

Answer 1

将Document.querySelectorAll()与选择器.selected[id]一起使用。也就是说，所有<{1}}类的元素都具有selected属性。

＆＃13;

id

＆＃13;

const elementsWithSelectedClass = document.querySelectorAll('.selected[id]')
const selectedElementIds = Array.from(elementsWithSelectedClass) // convert to array
    .map(el => el.id) // map to an array of id values

console.info(selectedElementIds)

＆＃13;

这将为您提供一系列<ul style="list-style:none"> <li id="test1" class="myElement selected"></li> <li id="test2" class="myElement"></li> <li id="test3" class="myElement"></li> <li id="test4" class="myElement selected"></li> <li id="test5" class="myElement selected"></li> <li id="test6" class="myElement"></li> </ul>值。

我使用Array.from将从id返回的NodeList转换为数组，以便我可以使用map方法。

Answer 2

使用jQuery

$(".myElement").each(function(index, element) {
    if(element.hasClass("selected")) {
        console.log(element.attr("id"));
        // or
        // console.log($(this).attr("id"));
    }
});

如果您不使用jQuery，请在此处发表评论

Answer 3

＆＃13;

var arr = [];
$(".myElement").click(function() {

  if ($(this).hasClass("selected")) {

    arr.push($(this).attr('id'))
  }
  console.log(arr)

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>

＆＃13;

使用.hasClass检查项目是否具有特定类

Answer 4

<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>

<script>

$(".selected").each(function () {

 console.log($(this).attr("id"))
});
</script>

Answer 5

尝试使用这个jQuery代码：

var selected =$('.selected');
selected.each(function(){
  console.log(this.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="test1" class="myElement selected"></li>
<li id="test2" class="myElement"></li>
<li id="test3" class="myElement"></li>
<li id="test4" class="myElement selected"></li>
<li id="test5" class="myElement selected"></li>
<li id="test6" class="myElement"></li>

如果您不想使用jQuery，则只能尝试使用JS：

var selected = document.getElementsByClassName('selected');
for (var i=0; i<selected.length; i++){
  console.log(selected[i].id);
}

    <li id="test1" class="myElement selected"></li>
    <li id="test2" class="myElement"></li>
    <li id="test3" class="myElement"></li>
    <li id="test4" class="myElement selected"></li>
    <li id="test5" class="myElement selected"></li>
    <li id="test6" class="myElement"></li>

如何获取具有特定类的多个元素id

5 个答案: