javascript - 选择具有特定属性值的所有第一个元素

Question

在表单上，​​我必须先选择所有 <a>具有来自表单中存在的所有列表项的特定属性值的元素。例如，在下面的代码中，我必须选择 <a>内容为 xxx 的元素和 zzz — 或者换句话说，第一个 <a>带有 data-role="modal" 的元素来自所有列表项。

console.log($('ul li a[data-role="modal"]:first'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a data-role="modal">xxx</a>
    <a data-role="modal">yyy</a>
  </li>
  <li>
    <a>abc</a>
    <a data-role="modal">zzz</a>
    <a data-role="modal">xyz</a>
  </li>
</ul>

我试过的 jQuery 只选择带有 xxx 的那个.

Answer 1

您可以使用 .find()获取 ul li 中所有具有属性 data-role=modal 的 a 元素并应用 :eq获得每场比赛的第一名:

$('ul li').find('a[data-role="modal"]:eq(0)').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a data-role="modal">xxx</a>
    <a data-role="modal">yyy</a>
  </li>
  <li>
    <a>abc</a>
    <a data-role="modal">zzz</a>
    <a data-role="modal">xyz</a>
  </li>
</ul>

引用资料

.find()

:eq