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

Question

在表单上，我必须从表单中的所有列表项中选择具有特定属性值的所有第一个<a>元素。例如，在下面的代码中，我必须选择包含content xxx和zzz <a>的 - 元素，换句话说，从所有列表项中选择第一个包含data-role="modal"的<a>元素。

​

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

您可以使用获取ul li中具有data-role=modal属性的所有a元素，并应用为每个匹配项获取第一个元素：

​

$('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

Answer 2

尝试：

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

​

console.log( $('ul li').find('a[data-role="modal"]:first').map(function() {
    return $(this).text();
}).get() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

​

Answer 3

看看这个

$('document').ready(function(){
    $('ul li').each(function(){
     $(this).find('a[data-role=modal]:first').css('background-color','red');
    });
});