jquery find out if any of the elements has the attribute value - javascript

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('');
}

Related

How to change a style property of element by class name without any use of ID's in JS?

I am doing a school project and it's my first time using JS, and we are not allowed to use any ID's for css styling, but on some event that the user does I want to change the style of a div in the page:
HTML:
<div class="ads">
...
</div>
CSS:
.ads{
display:block;
//and some other style properties
}
and when the user do the event I want to change the display property into :
display : none;
I know how it can be done using ID for the element, but how can it be done only by a class name?
I would like to be able to do it something like this:
document.getElementsByClassName('ads').style.display=none;
Thank you.
If you know that there is only one element with that class, use the first element of the NodeList that document.getElementsByClassName returns:
document.getElementsByClassName('ads')[0].style.display = 'none';
document.getElementsByClassName('ads')[0].style.display ='none';
If you have just a one element with class"ads", you can use:
document.querySelector('.ads').style.display='none'
Else, if you have more than one element you can add a unique class name for you element like this
<div class="ads foo">
and using document.querySelector('.foo').style.display='none'
for changing it's style.
You should put index, also the string after the equal sign must be with quotation marks, like below:
document.getElementsByClassName('ads')[0].style.display="none";
w3schools
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Remove attribute title from all HTML elements

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'));

JQuery Find Elements With Data Object

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();

looping through elements jquery selector

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/

Attributes in JQuery

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.

Categories