选择具有相同ID和不同属性jquery的元素

时间： 2024-11-11 admin IT培训

选择具有相同ID和不同属性jquery的元素推荐度：
相关推荐

我有一个列表ul，其中至少两行具有相同的id但具有不同的属性值id-type

CODE TRIED

在此代码中，我仅概述了两行（相同的ID），如何解决此问题？

$("button").on("click",function(){

$("ul").find("li#post1").css("border","5px solid red");


});

li{margin:5px 0;}

<script src=".8.0/jquery.min.js"></script>


<ul>
<li id='post1' id-type='1'> I dont want to be selected</li>

<li id='post1' id-type='2'> I want to be selected only</li>


<li id='post3' id-type='2'> text</li>

<li id='post2' id-type='2'> text</li>
</ul>
<button>elegir id='post1' id-type='2'</button>

回答如下：

ID应该在DOM中是唯一的。因此，您可以改为将所有id更改为class，然后可以轻松访问id-type='2'元素，例如：

$("button").on("click", function() {
  $("ul").find("li.post1[id-type='2']").css("border", "5px solid red");
});

li {
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<ul>
  <li class='post1' id-type='1'> I dont want to be selected</li>
  <li class='post1' id-type='2'> I want to be selected only</li>
  <li class='post3' id-type='2'> text</li>
  <li class='post2' id-type='2'> text</li>
</ul>
<button>elegir id='post1' id-type='2'</button>