find element by it's attribute value [duplicate] - javascript

This question already has answers here:
jQuery how to find an element based on a data-attribute value?
(9 answers)
Closed 7 years ago.
$('a').filter(function () {
return $(this).attr('area-expanded')
});
will return an array of links with attribute called 'area-expanded'.
I need to find a link, whose attribute 'area-expanded' value is true (there is always one such link on the page).
I tried the following:
$('a').filter(function(){return $(this).attr('area-expanded').val() == true});
but I am getting
Uncaught TypeError: Cannot read property 'val' of undefined
I'm complete noob in JS so I am sure there is something simle I am missing.
Thanks!

Use attribute-value selector:
Selects elements that have the specified attribute with a value exactly equal to a certain value.
$('a[area-expanded="true"]')
This will select all the <a> whose aria-expanded attribute value is set to true.

Related

How to use custom variable in JavaScript [duplicate]

This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".

Use value of id to search for class [duplicate]

This question already has answers here:
How to use JavaScript variables in jQuery selectors?
(6 answers)
Closed 4 years ago.
Im trying to get the value of an html element via Id. I now want to use that value to loop through all the elements with the class from the id.val. How can I search for a variable as a class.
$(".BtnSettings").click(function () {
var Daytime = $("#Daytime").val();
//Here i dont know what to do. Instead of .Daytime I want to search for the var Daytime. Or for $("#Daytime").val() obviously, doesnt matter.
$('.Daytime').each(function () {
$(this).prop("checked", true); // Element(s) are now enabled.
});
})
you can use the attr method of jquery to look for a specific attribute just set a value. if you want to change value of said attribute the second parameter of the function will set it for you like.
Daytime.attr("class","newClass")
$("#Daytime").attr("class")
will give you the class of #Daytime

jQuery attribute exists or not [duplicate]

This question already has answers here:
jQuery hasAttr checking to see if there is an attribute on an element [duplicate]
(9 answers)
Closed 5 years ago.
How do I find a certain attribute exists or not for a selected item in jQuery?
For example, selected element jQuery('.button'), now this can have an attribute 'xyz'. How do I get whether it is having that or not?
You can use the hasAttribute method:
// Attach the event to the button
$('button').on('click', function() {
// This will refer the element from where event has originated
if (this.hasAttribute("style")) {
alert('yes')
} else {
alert('no')
}
})
If you want to use the jQuery library, you can directly use the attr method in the if condition.
if($('#yourElement').attr('someProp')){}
Alternatively, you can also use the jQuery is selector:
if ($(this).is('[style]')) {// rest of the code}
DEMO
You have two solutions that I know of. 1) Native Javascript has a function for this .hasAttribute() (e.g. $(this)[0].hasAttribute('name');). 2) Using jQuery, you can check if $(this).attr('name') is undefined or not.

Clicking on an element with a variable attribute value in a certain format with CasperJS [duplicate]

This question already has an answer here:
Is it possible to use a CSS wildcard in the middle of an attribute selector?
(1 answer)
Closed 6 years ago.
I have that code snippet to click a button within CasperJS.
this.click('input[name="suggestion-to-repeat:5:suggestion:subForm:select-email"]');
The Problem is, there is an variable Number in the Name. In this example the "5". The Number can be between 1-10. Is there any chance to work with wildcards or any other possibilities to select the button?
Have a look to https://www.w3.org/TR/selectors/#selectors The following may help:
E[foo^="bar"]an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo$="bar"]an E element whose "foo" attribute value ends exactly with the string "bar"
Try:
'input[Name^="suggestion-to-repeat:"][Name$=":suggestion:subForm:select-email"]'

Jquery selecting element by 'data-id' [duplicate]

This question already has answers here:
jQuery how to find an element based on a data-attribute value?
(9 answers)
Closed 8 years ago.
Similar to the question here , I need to get an element based on its data-id.
The problem I encounter is that I want to retrieve a an a element with a certain data-id using a variable.
lets consider the code below:
var item_id = 12345;
if I want to get the element that has the data-id with the value of item_id, would I do the following ?
$('[data-id=item_id]')
This does not work, and I am kind of stuck on how I can get around this.
You can concatenate the variable using +:
$('[data-id=' + item_id + ']')

Categories

Resources