如何獲取具有特定類的多個元素ID

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>

我如何獲取onclick中具有“ selected”類的所有元素的ID？

Answer 1

將Document.querySelectorAll()與選擇器.selected[id] 。 也就是說，所有selected了類的元素也都具有id屬性。

 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) 

 <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> 

這將為您提供id值數組。

我正在使用Array.from將querySelectorAll返回的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

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

 <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> 

使用.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>