This question already has answers here:
Get list of data-* attributes using javascript / jQuery
(11 answers)
Wildcards in HTML5 data attributes
(4 answers)
Closed 9 years ago.
I want to select all elements with any data attribute in jQuery. Is this possible? I know how to use wildcards in attribute values in the selector, but I can't find a way to use wildcards in the attribute name.
I can't use .data() for this because it also matches other objects like the window. I only want to select elements with a data attribute in the HTML.
Try this
var $result = $('*').filter(function(){
return !$.isEmptyObject($(this).data());
});
or if you're just talking about the attribute:
var $result = $('*').filter(function(){
var ret = false;
$.each(this.attributes, function() {
if(/^data-/.test(this.nodeName)){
ret = true;
return false; //to break the loop
}
});
return ret;
});
Perhaps not the most efficent way, but hey
http://jsfiddle.net/M5bAY/
Related
This question already has answers here:
Select multiple jQuery objects with .add()
(3 answers)
Closed 5 years ago.
Here is my code:
var $btnNone = $('#btn-none');
var $btn1234 = $('#btn-1, #btn-2, #btn-3, #btn-4');
// This selector works fine
var $btnReview1234None = $('#btn-1, #btn-2, #btn-3, #btn-4, #btn-none')
// HOW TO MAKE THIS SELECTOR WORK.
// This selector ignores $btnNone but respects $btn1234.
// This listens only first item in the selector
var $btnReview1234None = $($btn1234, $btnNone);
$btn1234None.click(function(){
alert('Lorem')
});
The issue is because $($btn1234, $btnNone) will be treated as a contextual selector, ie. jQuery will search the DOM to find the $btn1234 element within $btnNone.
To fix this you could provide an array of both elements to the selector:
var $btnReview1234None = $([$btn1234, $btnNone]);
Or you could use add():
var $btnReview1234None = $btn1234.add($btnNone);
This question already has answers here:
How to retrieve checkboxes values in jQuery
(14 answers)
Closed 9 years ago.
I am looking to get all checkboxes' VALUE which have been selected through jQuery.
You want the :checkbox:checked selector and map to create an array of the values:
var checkedValues = $('input:checkbox:checked').map(function() {
return this.value;
}).get();
If your checkboxes have a shared class it would be faster to use that instead, eg. $('.mycheckboxes:checked'), or for a common name $('input[name="Foo"]:checked')
- Update -
If you don't need IE support then you can now make the map() call more succinct by using an arrow function:
var checkedValues = $('input:checkbox:checked').map((i, el) => el.value).get();
This question already has answers here:
How to get the attributes of a HTML element using JQuery?
(4 answers)
Closed 8 years ago.
I am looping through drop down option and checking attribute.
if attribute match than counter is increase. At the end i show counter as alert.
This is my code but some how its not working dont know why
var count= 0;
$('.mydropdown option').each(function () {
var level = this.attr("myattr");
if (level == "0") {
count++;
}
});
alert(count);
}
this is a plain javascript object, it does not contain a function called .attr()
Try,
var level = $(this).attr("myattr");
Just convert the this reference into a jquery object and invoke .attr() over it
This question already has answers here:
Get array of text values using selector instead of iterating?
(7 answers)
Closed 9 years ago.
I have html with multiple things classed .text. I the perform
console.log($(whatever).find('.foo').text());
The result is a textstring with all the contents in it. Can I save it to an array instead somehow?
You can use the map method to get this done
var textArray = $(whatever).find('.foo').map(function() {
return $(this).text();
}).get();
This will get you an array.. If you want to display it as a string then just use join along with it.
Check Fiddle
var arr = [];
$(whatever).find('.foo').each(function() {
arr.push($(this).text());
});
This question already has answers here:
How can I check in JavaScript if a DOM element contains a class?
(8 answers)
Check if an element contains a class in JavaScript?
(30 answers)
Closed 9 years ago.
Is there an easy way to tell if an HTML element has a specific class? For example:
var element = document.getElementById('something');
if (element.class == 'car')
Of course an element can have multiple classes, so maybe the if statement would have to be of the following form?
if (element.class.includes('car'))
var element = document.getElementById("myid");
if (element.classList.contains("myclass")) { /* do stuff */ }
Read more on element#classList here: https://developer.mozilla.org/en-US/docs/DOM/element.classList
This link also contains a polyfill for older browsers.
If using jQuery is an option you can use hasClass() see http://api.jquery.com/hasClass/
If not you can take a look at pure JS implementation - Test if an element contains a class?
For strange reasons the name of the member containing the class(es) is className, not class. Multiple class names are separated by space.
You need to use:
class = document.getElementById("{id_of_element").getAttribute("class");
then
String[] vals = class.split(" ");
var match = false;
for (i = 0; i < vals.length;i++) {
if (vals[i].equalsIgnoreCase('car') {
match = true;
break;
}
}
if (match) {
//do something
}
HTH.