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

Question

On a form, I have to select all first <a> elements with a specific attribute value from all the list items present in the form. For instance, in the below code, I have to select <a> elements with the content xxx and zzz — or in other words, the first <a> element with data-role="modal" from all list items.

 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> 

The jQuery I tried is only selecting the one with xxx .

Answer 1

You can use .find() to get all a elements with attribute data-role=modal in ul li and apply :eq to get first for each match:

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

References

.find()

:eq

Answer 2

Try:

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

Check this

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

Answer 4

I guess this may help

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