如何使用jQuery将仅具有特定属性的元素与其他元素进行匹配？

Question

Assuming example elements:

<a href="..." rel="...">...
<a href="..." rel="..." target="...">...

How can I match only the first element? I would like to tell jQuery to match only the <a> element which has an href and a rel attribute, but no other attributes. :not() requires me to mention specific attributes to exclude, but what about unknown ones?

Answer 1

Use filter() and check the attributes length. Note that adding anything like class or data attributes would mean you would need to modify this

 $('a[href][rel]').filter(function(){ return this.attributes.length === 2; }).css('color','red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" rel="foo" target="_blank"> Has target</a> <a href="#" rel="foo" > No target</a> <a href="#" > No rel </a> 

Answer 2

You can use the not() and first() function for this, to select the first element in a collection & filter out the unwanted elements.

Example:

$("a[href][rel]").not("[target]").first();

In order to exclude items that contain other unknown attributes, you should use filter as the other answers advise.

This wouldn't be a good solution however, it would be much better to add a class to the elements you need to select, or have them in another div.

Answer 3

Use .filter() with test condition to check element has only attributes length

 $('a[href][rel]').filter(function() { return this.attributes.length == 2 }).addClass('a'); 

 .a { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="..." rel="...">...</a> <a href="..." rel="..." target="...">...</a> 

Answer 4

You can use this.hasAttribute and further check this.attributes.length === 2 to confirm that <a> element has only two attributes:

 $('a').each(function(){ if(this.attributes.length == 2 && this.hasAttribute("href") && this.hasAttribute("rel")){ $(this).addClass('selected'); } }); 

 .selected{ color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="..." rel="...">1111</a> <a href="..." rel="..." target="...">222</a> <a href="..." rel="...">333</a> <a href="..." rel="..." target="...">444</a>