Get HTML tag from Attribute having value "xyz"

Question

i have a html tag as below (no id or class defined):
<a href="#" letter="xyz">All</a>

i need to get the tag having attribute value='xyz'
i was successful in finding the attribute by:

var html_tag = $("a").find('[letter="xyz"]');
but it returns an object.

i need to get html tag so that i can use it as:
$(html_tag).css('color','#FFFFFF');

Or suggest me any other solution if this is not possible.

Answer 1

$("a").find('[letter="xyz"]') will find descendants of anchor with attribute value letter="xyz"

You need to use Attribute Equals Selector [name=”value”] with anchor tag

Selects elements that have the specified attribute with a value exactly equal to a certain value.

Use

$('a[letter="xyz"]').css('color','#FFFFFF');

You could also use .filter()

Reduce the set of matched elements to those that match the selector or pass the function's test.

$("a").filter('[letter="xyz"]').css('color','#FFFFFF');

Answer 2

Your code is trying to find element in anchor element that have letter attr equal to xyz. which do not exists. Using .filter() instead of .find() would solve the problem.

However you can simply use:

var html_tag = $('a[letter="xyz"]');

Note: you should use .data-* attributes(added in HTML5) for adding custom attributes as adding your own attributes can break elements validation and make html invalid (see https://stackoverflow.com/a/1735239/1719752).

Answer 3

use the following code

var anchorTag = $('a[letter="xyz"]');