I have to select elements which contains id attribute and class attribute having 'child-of-' value and loop through the elements returned by the selector.
So far i could write:
$('.child-of-').each(function(){
...
});
This selects all the elements having class of child-of- including elements which does not have id also.
There are elements which has that class but does not have any id attribute.
so How can i select elements which has 'id' attribute and id has some value and also has class of child-of-. ?
For example
<div id="any1" class="child-of-"></div>
<div id="any2" class="child-of-"></div>
<div class="child-of-"></div>
Only the div having id attribute must be selected. ie the first two divs in the example. the third does not have id attribute value and hence should not be selected
You can use attribute selector.
$('.child-of-[id]').each(function(){
...
});
Fiddle
If your classes starts with child-of- you can use attribute starts with selector:
$('[class^="child-of-"][id]').each(function(){
...
});
$('[id].child-of-').each(function(){
...
});
You can use this selector:
$('#child-of-.child-of-').each(function(){
...
});
To get the attribute values you would use the attribute selectors:
$('[id*="child-of-"][class*="child-of-"]').each(function...
Substring attribute selectors - http://api.jquery.com/attribute-contains-selector/
Related
I want to compleately wipe the title attribute from all elements inside a html doc. From table, p, img, div etc..
Currently I do this:
$(document).ready(function(){
$("a").removeAttr("title");
$("img").removeAttr("title");
$("div").removeAttr("title");
// and so on
// and so on
// and so on
});
Is there a more elegant way to do this? Without selecting individual elements?
Use the attribute selector and select just the elements with the title attribute and not all elements.
$("[title]").removeAttr("title");
The all selector, *, selector should do the trick
$('*').removeAttr('title');
You can simply do this using All Selector (“*”):
$("*").removeAttr("title");
Without jQuery this would be:
Array.from(document.getElementsByTagName('*')).forEach(elem => elem.removeAttribute('title'));
or e.g. to remove the attribute only from specific tags, e.g. img:
Array.from(document.getElementsByTagName('img')).forEach(elem => elem.removeAttribute('title'));
i want to find out if any of the elements with same classes has the attribute value that i specified
ex.
if ($('.elem').attr('category') == 'meat') {
alert('');
}
some elements with the same classes can have an attribute: category="fruits" . . becuase I used classes to select the elements, It returns multiple results i want to find out if any of them has ex. the attribute meat
Use attribute selector like this.
$(".elem[category='meat']").length
This will select all the elements with category meat and classname .elem
You can use .is() with attribute equals selector
if ($('.elem').is('[category="meat"]')) {
alert('');
}
I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();
I have the following code:
$('#select_albums').load(document.location.href + "&action=get_albums");
But this is only replacing only the first found div with the id #select_albums from DOM. How do I replace all divs with an id?
Every item in the DOM has a unique id. If you want to act on many divs at the same time use a class $(".myclass") or a tag $("div") selector.
Yes because by definition an element ID can only appear once on a page. If you have more elements use a class instead.
$('.select_albums').load(document.location.href + "&action=get_albums");
With
<div class="select_albums"></div>
<div class="select_albums"></div>
id's must be unique, try using a class instead such as $(".albums").load...
ids must be unique
Suppose I have these divs:
<div class="hat" rel="cap">
<div class="hat" rel="pine">
<div class="hat" rel="mouse">
How do I use JQuery to do a "where"?
For example
$("div.hat").remove WHERE rel="mouse"
Use the Attribute equals selector:
$('div.hat[rel=mouse]').remove()
You should be able to use the attribute selector:
$("div.hat[rel]") // to get all <div class="hat"> tags with a rel attribute
$('div.hat[rel="mouse"]') // to get a <div class="hat"> tag with a specific rel attribute
Use one of the attribute selectors such as the Attribute Equals Selector for this type of selection. For example:
$('div.hat[rel=mouse]').remove();
There are a number of other variations of the attribute selector to do things like matching an element whose attribute begins with, ends with, or contains a certain value. Check out all the Attribute Selectors at the jQuery API and familiarize yourself with them.