Fetch specific element using custom attribute in jQuery

Question

Below is a sample structure from which i'm trying to get the specific value of custom attribute

<div id="123"></div>
<div id="456"></div>
<div context="james"></div>

Below is how i'm trying to fetch, but it always returns false.

if ( $('div').attr('context') == 'james' ) {
    alert("yes");
} else {
    alert("no");
}

The first div does not have that attribute. attr() does not return an array, or find the element that has that attribute to get the value — Taplar
– Taplar, Commented Nov 14, 2018 at 22:50
You could do $('div[context]').attr('context') but you should probably consider putting an id or class on it to avoid the attribute selector — Taplar
– Taplar, Commented Nov 14, 2018 at 22:51
btw, your html is not valid unless your custom attribute starts with data- - so in this case it's best practice to use data-context="james". Also jQuery has specific support for data-* attributes: api.jquery.com/data — Robin Zigmond
– Robin Zigmond, Commented Nov 14, 2018 at 22:59

Spencer Wieczorek · Accepted Answer · 2018-11-14 23:02:00Z

3

The call to $('div').attr('context') will only grab the first div found in the DOM and check it's value. Since it doesn't have that attribute you get false. Instead you will want to iterate over all your div's and check each one. For example:

var found = false;
$('div').each(function( ) {
  if($(this).attr('context') === 'james') found = true;
});
if(found) alert("yes");
else alert("no")

You could also use .filter:

if( $('div').filter(function(){ return $(this).attr('context') === 'james' }).length )
    alert("yes");
else 
    alert("no");

Note: If you used data-context="james" you would use the .data() method rather than .attr().

edited Nov 14, 2018 at 23:02

answered Nov 14, 2018 at 22:58

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Terry Over a year ago

Awesome answer, I love the alternative that uses .filter() because it's an easy one-liner :) might want to suggest OP to use strict equality === instead.

Snowmonkey · Accepted Answer · 2018-11-14 23:27:36Z

0

Simply let jQuery do the filtering for you. Also, this can be done with plain old vanilla javascript pretty easily:

// Select by attribute
var theDiv = $("div[context='james']");

// If we have something here...
if(theDiv.length){
  console.log(theDiv.text() );
} else {
  console.log("Nope, not found.");
}

// We can use this same selector with plain javascript...
let theSameDiv = document.querySelector("div[context='james']");

// In this event, however, we access the text differently.
if(theSameDiv){
  console.log("Found without jQuery!", theSameDiv.textContent);
} else {
  console.log("Rats...");
}

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

<div id="123">the first div</div>
<div id="456">div the second</div>
<div context="james">I'm 'Enry the Eighth, I Am!</div>

edited Nov 14, 2018 at 23:27

answered Nov 14, 2018 at 23:14

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

2 Comments

Taplar Over a year ago

The issue here is, while you can do this, attribute selectors effectively perform a DOM scan. The browser does not index elements by all their attributes, so when you search by an attribute, it literally has to step though every single node in the context to see if it matches. This is why for performance reasons it is better to use a tagName/class/id selector, or if you are forced to use an attribute only selector, to scope down the context upon which you are performing it on so as to reduce the number of nodes it has to evaluate against.

Snowmonkey Over a year ago

And you're absolutely right. I was simplifying, as I had a very limited number of nodes. Changed the code to include the div tagName, in order to limit that number of nodes. Very good point, and well worth noting. Thank you!

Collectives™ on Stack Overflow

Fetch specific element using custom attribute in jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related