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);
Related
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 2 years ago.
I have the following code snippet
$("#personalizacoesOpcionais")
.find(".qtdPersonalizacao")
.each(function (n, t) {
var i = {};
i.IdProdutoIngrediente = parseInt($(t).attr("data-id"));
i.Qtde = parseFloat($(t).text());
r[n] = i
});
In the html there are several divs personalizacoesOpcionais and each one with numerous elements qtdPersonalizacao.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
Ids are supposed to be unique within a document and jQuery will just returns the first matching element.
The recommended solution would be to use a class instead of an id for personalizacoesOpcionais.
If this is not possible, for example if you don't control the code that generate the markup, a workaround would be to use $("div[id=personalizacoesOpcionais]") instead of $("#personalizacoesOpcionais")
This question already has answers here:
Combining selectors?
(3 answers)
Closed 6 years ago.
I need to combine two jquery selectors into a single Jquery object.
I tried $("#selector","#selector"), but its not working and returning blank, do we have any predefined methods to achieve this.
Something like
var combined_Jquery_obj =$("#selector") +$("#selector")
Use add() method when you want to add elements to an existing jQuery object.
var combined_Jquery_obj = $("#selector1").add("#selector2")
Or use comma separated multiple selectors when you want to select multiple selectors.
var combined_Jquery_obj = $("#selector1,#selector2")
Use Multiple Selector
var combined_Jquery_obj =$("#selector,#selector")
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/
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.
This question already has answers here:
Getting an empty JQuery object
(4 answers)
Closed 8 years ago.
Is there an elegant way to create an empty jquery element (versus null) ?
$myEmptyElement = $("#ThisIdDoesNotExist234343");
The rational is not checking later on for null.
Later we do :
$myEmptyElement.destroy();
Sure:
var $emptyElement = $();
Why would you want one, though?
A simple example would be:
var $emptyElement = $();
One way:
var $emptyElement = new $;