This question already has answers here:
document.querySelector multiple data-attributes in one element
(3 answers)
Closed 2 years ago.
I have a very specific situation here that I can't find anywhere else.
I need to point to a <link> element that contains the rel="me" attribute AND an href="https://www.example.com/profile/12345" attribute that CONTAINS 12345.
<link rel="me" href="https://www.example.com/profile/12345"/>
I tried with document.querySelectorAll() but I don't know how to format it to make the AND operator work.
if (document.querySelectorAll('[rel="me"], a[href*=123456]')[0])
Any ideas on how to do this?
In a CSS selector "AND" is just not using a combinator at all.
If you have a type (or universal) selector, it has to go first.
The type selector to select <link> elements is link not a.
link[rel="me"][href*="12345"]
If you want the first match, use querySelector() instead of querySelectorAll()[0]
const el = document.querySelector('link[rel="me"][href*="12345"]');
console.log(el);
<link rel="me" href="https://www.example.com/profile/12345"/>
Related
This question already has answers here:
Filter divs by data-attr containing string
(4 answers)
Closed 6 years ago.
I'm filtering images based on data attributes, and for each filter data attribute there can be several tag values. To match an element based on one data attribute value, you can do this:
$('.image-container').filter('[data-places="Canada"]').css('display','none');
But when I try this with a space delimited list, it doesn't work:
<div class="image-container" data-places="Nunavut Canada">...</div>
Is there any way in jquery to select by a value in a set in a data attribute?
The other option I can think of is to loop through an array of selected elements, but I've got images loading in via ajax in an infinite scroll so this array would be very bulky at some point. I'm open to non-jquery solutions as well.
You have to use attribute contains a word selector at this context,
$('.image-container').filter('[data-places~="Canada"]').css('display','none');
Attribute equals selector cannot be used here since you are searching for a particular word in the attribute. Also you can use attribute contains selector, but that would select element with attribute like data-places="NunavutCanada"> also.
This question already has answers here:
jQuery : select all element with custom attribute [duplicate]
(2 answers)
Closed 6 years ago.
Is there a way to grab a whole element by one of its data attributes via javascript or jQuery? Say i have a link somewhere on a website like this
Google
Since the link above doesn't have any id or class i cannot grab it by that. I need to get it by its data-source attribute. So say i could somehow with jQuery get the value of a attribute with the name of data-source. How would i do that ?
$('[data-source="google"]')
This will select all elements which data-source attribute equals to google.
See Attribute Equals Selector [name=”value”].
This question already has answers here:
JQuery class selector vs id selector
(5 answers)
Closed 8 years ago.
HTML:
JQuery:
('.nameClass').click(myFunction);
or
('#txtName').click(myFunction);
In Jquery Which is best perform when we have 100's of control to apply this logic. And Why better perform ?
Using id selector will be fast always as it returns single element but class selector will return one or more elements.
NOTE - You must ensure that id should be unique through out the DOM.
This question already has answers here:
jquery get only all html elements with ids
(3 answers)
Closed 8 years ago.
Simple. I want to traverse the DOM and find all elements that have an id attribute. Can someone help me with a js and/or jquery script
You can query all the elements with an id attribute by using the following jQuery selector:
$("[id]")
You can also just use plain JavaScript using querySelectorAll:
document.querySelectorAll("[id]")
If you want to find non-empty id attributes, use this selector instead:
'[id]:not([id]="")'
Simple attribute selector
$('[id]');
Reference : Has Attribute Selector [name]
This question already has answers here:
chaining getElementById
(6 answers)
Closed 9 years ago.
If you use getElementById to with document like - document.getElementById then it always works.
But however, if we perform the same on an element say x like x.getElementById, then it returns an error.
The unusual thing about this is that getElementsByClassName and getElementsByTagName work on the elements however getElementById doesn't!
Container IDs should be unique, so there's no reason to find an object by ID within another container. This is why you only need document.getElementById to access any element by its ID, whereas when you are searching by class or tag name, you might want to only search within a specific container, which is why you can do x.getElementsByClassName etc.