Im trying to find all img in a page and if the next tag is div.txt add class test on this next element.
I've tried this but I dont know why it isnt working:
for(i = 0; i < $('.page img').length; i++){
$('.page').find('img:eq('+i+')').next('.txt').addClass('teste');
}
Some help would be appreciated.
You were missing $. No need to loop, use .each() like this:
$('.page img').each(function(){
$(this).next('.txt').addClass('teste');
});
Related
I want to toggle a class to the html tag element. I've made it work with the body element but I cannot find the solution to also toggle a class to the html tag.
document.querySelector('[data-menu-mobile]').addEventListener('click', function(){
document.body.classList.toggle('nav-main-mobile-open');
document.html.classList.toggle('html-color-fill');
});
I know this seems to be wrong:
document.html.classList.toggle('html-color-fill');
What is the correct way to do this?
There's no document.html object, to get to the root element you should use document.documentElement.
document.documentElement.classList.toggle('html-color-fill')
This should work:
var elements = document.getElementsByClassName("myclass");
//iterate through all found elements
Array.prototype.forEach.call(elements, function(element) {
element.className = "html-color-fill";
//or remove class with:
//element.className = "";
});
I can do this in jquery but for some reason my boss prefers cutting the server request down to 32kb than using the magic of jquery. So, How can I apply effects to all li tags on click using plain javascript?
I have tried getElementById but this only works on ids. not very good with javascript as well. My li is so basic, it doesn't have class name.
EDIT:
Want to hide all li on click. Tried this from one of the answers but error saying
TypeError: document.getElementById(...).getElementsByTagName(...).style is undefined
document.getElementById('holder').getElementsByTagName('li').style.display="none";
many thanks.
Use document.getElementsByTagName('li'); this will return all li-s. Or get li s from specific element:
document.getElementById('myelementid').getElementsByTagName('li');
EDIT hiding all li elements inside element with id- "holder":
var lis = document.getElementById('holder').getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i].style.display="none";
}
Try this:
var allLis = document.getElementsByTagName('li'), thisLi, i, l;
for(i=0, l=allLis.length; i<l; i++){
thisLi = allLis[i];
// do something to 'thisLi' here
}
Hey guys I am trying to fade in a list of items sequentially while using jquery templates.
I've seen how to do this without the use of jquery templates but not sure about how to do so when using them.
Here's the effect I am going for:
http://demos.coolajax.net/jquery/sequential_fadein_fadeout/
Here's my template code:
$template.tmpl(formattedData).appendTo($el);
Thanks for any help!
Update:
I think something like the following is what I need to do...
$template.tmpl(formattedData).appendTo($el).delay(100*index).fadeIn(250);
The question is how do I get that index value?
Can I do something like this?
$template.tmpl(formattedData).appendTo($el).each(function(i){$.delay(100*i).fadeIn(250)});
UPDATE:
I was able to figure it out. Here's the answer
$template.tmpl(formattedData).appendTo($el).each(function(i){$(this).delay(200*i).fadeIn(250);});
Don't forget to set your display property to none in your CSS for your 'li' (already had that part right).
Thanks anyway to all the folks that tried to help out!
you should append with "display:none" style then animate each one.
In your code "each" doesn't iterate li tags, it tries to iterate li.parent tag(ul).
$(document).ready(function() {
for(var i=0; i < 10; i++) {
$("ul").append("<li style='display:none'>New element-"+i+"</li>")
}
$("ul li").each(function(index) {
$(this).delay(100*index).fadeIn(250);
$("li:even").css("background","#cfe9b6");
$("li:odd").css("background","#b0db86");
});
});
DEMO
I have 29 buttons: todayResultsbutton0 .. todayResultsbutton28,
and 29 divs: todayResultsUrls0 .. todayResultsUrls28.
I also have a function toggleVisibility(divName) that hide/show the given div.
I am trying to use the following code:
for (var i=0; i < 29; ++i) {
var b = "#todayResultsbutton"+i;
var d = "todayResultsUrls"+i;
$(b).click(function(){toggleVisibility(d);});
}
I thought that this will cause each button click to show/hide the matching div but the actual result is that clicking on any button (0 .. 28) show/hide the last div - todayResultsUrls28.
Can someone tell me where am I wrong?
Thanks.
Use a class.
$(".myClass").click(function() {
var d = $(this).attr("id").replace("button", "Urls");
toggleVisibility(d);
});
Instead of trying to use a loop, you'd be better off using the selector to "find" your divs..
say you have something like:
<table>
<tr><td>
<input type="button" id="myButton" value="test" text="test" />
</td><td><div id="myDiv"></div></td></tr></table>
You can find myDiv by :
$('#myButton').parent().find('#myDiv').hide();
You could use the "startsWith" attribute selector with the id, then build the url from the id of the clicked item.
$('[id^=todayResultsbutton]').click( function() {
var url = this.id.replace(/button/,'Urls');
toggleVisibility(url);
});
Use
var d = "#todayResultsUrls"+i;
Instead of
var d = "todayResultsUrls"+i;
You can use this:
$('button[id^="todayResultsbutton"]').click(function() {
var index = this.id.substring(18,this.id.length);
toggleVisibility("todayResultsUrls"+index);
});
This will find all <button> tags with id's starting with todayResultsbutton. It will then get the ID for the clicked tag, remove the todayResultsbutton part of it to get the id and then call the toggleVisibilty() function.
Example here.
Edit
Notes:
Using button before the starts with selector ([id^="todayResultsbutton"]) speeds up the jQuery selector because it can use the native getElementsByTagName function to get all button tags and then only check those for the specific ID.
this.id is used instead of jQuery's $(this).attr('id') because it's faster (doesn't require wrapping this or calling the extra function attr()) and shouldn't cause any cross-browser issues.
Toggle visibility by finding the relevent div usint the event target rather than classes etc.
Assuming:
<div id='todayResultsUrls1'>
<button id='todayResultsbutton'></button>
</div>
Using the event target you can get the button element and find the div you want to hide.
var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);
I am trying to write a method that grabs all the elements of a certain classname for browsers that don't have the 'getElementsByClassName' method. This works perfectly for elements that are generated server-side, however the page has the ability to add elements dynamically for some reason 'window.document.all' does not get these dynamic elements. Any ideas? Method below.
function getClassName(class) {
var i, neededStuff = [], elements = document.getElementsByTagName('*');
for (i = 0; i < elements.length; i++) {
if (elements[i].className == class) {
neededStuff[neededStuff.length] = elements[i];
}
}
return neededStuff;
}
class is a reserved keyword in IE. Don't use it literally. Change class to something like theClass.
Also, try document.getElementsByTagName('*') instead of document.all if changing class doesn't do it.
EDIT:
http://work.arounds.org/sandbox/72
Works perfectly for me in IE6 ^
Let me try dynamically adding...
EDIT #2: works fine..
http://work.arounds.org/sandbox/72
Use jQuery :)
http://jquery.com/
$('.ClassName')
will return your elements :)
then you can change it's value, add classes very easily!
Some great tutorials here
http://docs.jquery.com/Tutorials