выбрать элементы с одинаковым идентификатором и другим атрибутом jquery

Question

У меня есть список 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.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>

Answer 1

идентификаторы должны быть уникальными в DOM. Таким образом, вы можете изменить все идентификаторы на класс, а затем легко получить доступ к элементу 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.com/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>