How can I change the attribute of an element, depending on another attribute?
For example, I have 2 <a> elements. They both have the class myClass. One of the elements has rel="1" and the other has rel="2". I wish to only change the z-index on the one which has rel=1. How do I do this?
I've tried:
$(".myClass[rel='1']").css("z-index", 10);
But it doesn't work. Cheers.
try this:
$(".myClass[rel='1']").css('display', 'none');
and see if it disappears. Then you will know if it is your selector, or positioning.
As z-index contains a hyphen you have to reference it in camel case:
$(".myClass[rel='1']").css("zIndex", 10);
Related
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.
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
This is my HTML :
<li class="custom-bottom-list">
<a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a>
</li>
My javascript function Upvote :
function upvote(el){
$(el+' i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
console.log( event );
}
Basically i want to select and change the css of the 'i' tag inside the particular element which is clicked.
What its doing now is its changing the css of all 'i' tags present in the page.
Can somebody tell me a efficient way to do this?
PS - I tried onClick="upvote(event) and $(event.target).removeClass('fa-thu..
But this works only when I click the 'i' tag. When i click the span tag it changes the span's css!
You can't glue different selectors like that together.
el does not contain a string selector, so you need to use the jQuery library to traverse to the i element.
If you were to console.log(el) you would see why that selector wouldn't work.
Use .find:
$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
Another method (although slower, and more limited because it only travels one level in the DOM):
$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
And, as #newboyhun pointed out, another way is to provide context to the selector:
$('i', el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
use find() to get child
$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
or you can find child using class like below
$('.fa-thumbs-o-up',el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
u can try children() too
$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
You can try this
if you want to custom CSS
$(el).find('i').css({'color' : 'black'});
if you want to add or remove Class
$(el).find('i').removeClass('fa-thumbs-o-up').addClass("fa-spin");
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 need to change more than one style attribute for a given element. I know how to change one: document.getElementById(today).style.visibility= "visible";
but am unsure of the syntax for changing more than one e.g. visibility,width, height and font-color.
It's just multiple calls:
document.getElementById(today).style.visibility = "visible";
document.getElementById(today).style.color = "red";
document.getElementById(today).style.height = "5em";
If you are willing to replace any other inline styles for that element you can use the style.cssText property.
document.getElementById('idstring').style.cssText=
'font-size:1em;color:blue;visibility:visible';
You need to reference each attribute one at a time, i.e. .style.width=, .style.height=, etc.
You could shorten the amount of typing you do a bit like so:
var g = document.getElementById(today);
g.style.width=100;
g.style.height=100;
g.style.visibility='visible';
CSS way would be to create a class that does all the styling common to those elements and assign the class attribute to them,
alternatively, if they are inhertiable styles then put the elements in a common parent say div and set the div's style