I need to toggle two images by clicking on the parent a tag.
here is my JavaScript
$("#VerColMenu > li > a").click(function() {
var src = ($(this).children()[0].attr('src') === 'img/plus.png')
? 'img/minus.png'
: 'img/plus.png';
$(this).children()[0].attr('src', src);
});
but nothing happens here.
Attaching [0] to a jQuery object retrieves the under-lying DOM object. Along with the above/below answers, you can also use .first() to get the first element in a jQuery array set:
$("#VerColMenu > li > a").click(function() {
var src = ($(this).children().first().attr('src') === 'img/plus.png') ? 'img/minus.png' : 'img/plus.png';
$(this).children().first().attr('src', src);
});
DEMO
This of course does have to be wrapped in $(document).ready() or something similar.
attr is a jQuery method not a DOM method so you don't need [0]. Try this:
$('#VerColMenu a').click(function(){
var $img = $(this).children();
var src = $img.attr('src');
$img.attr('src', src === 'img/plus.png' ? 'img/minus.png' : 'img/plus.png');
});
Firstly .children()[0]
gets the children as the DOM object and not a jQuery Object..
And .attr() can be used only on jQuery objects..
Try the :eq selector instead of .children()
$("#VerColMenu > li > a").click(function() {
var src = ($(this).find('img:eq(0)').attr('src') === 'img/plus.png')
? 'img/minus.png'
: 'img/plus.png';
$(this).find('img:eq(0)') .attr('src', src);
});
I am assuming by .children()[0] you meant the first image inside the li ,
so using img:eq(0) which will select the first image element inside the li..
use this code it can help u
function toggle(a) {
if (isloaded) {
document.getElementById(a).src=toggleimage[i_image];
}
i_image++
if (i_image>1) {i_image=0}
}
<img name="togglepicture" src="p1.gif" border="0">
Related
I'm trying to search the net, but no result...
Simple; how can I get other tag's css and add it to other on click?
For example:
I have b tag with css. I need to copy it's css to a tag on click.
var css = $('b').css();
$('.switch > a').click(function() {
$(this).css(css);
});
Is it something like this?
use cssText to get and set all the current styles
var css = $('b').css('cssText');
$('.switch > a').click(function(e) {
e.preventDefault();
$(this).css('cssText', css);
});
FIDDLE
If you know which class is on your id, just do something like that
$('#YourId').attr('class', 'yourCssClass');
If you don't know it's class:
var classA = $('#YourId').attr('class');
$('#YourIdB').attr('class', classA);
var newclass= $('b').attr('class');
$('.switch > a').click(function() {
$(this).attr('class','newclass');
});
Although I found several answers to select a href attribute neither of them is working for me. Maybe someone can help.
The html is as follows
<div class="galleryitem">
<div class="itemlink">
Page
</div>
<div class="itemimg">
test1.png
</div>
</div>
<div class="galleryitem">
<div class="itemlink">
Page 1
</div>
<div class="itemimg">
test2.png
</div>
</div>
Now i want to geht all the attribute values in the hrefs and tried with
$('.galleryitem').each(function() {
var link = $(this).children('itemlink a').attr('href');
var img = $(this).children(".itemimg a").attr("href");
//jQuery("#somediv").append("<a href='" + link + "'><img class='cloudcarousel' src='" + img + "'/></a>");
});
I dont know why link and img are undefined. Even $(this).children('.itemlink a') is undefined.
Can anyone help on this?
Try with find
$('.galleryitem').each(function() {
var link = $(this).find('itemlink a').attr('href');
var img = $(this).find(".itemimg a").attr("href");
//...
})
you want to sure the .find() method instead of .children which only grabs the immediate descendants. (you also have a small error missing the period in itemlink)
var link = $(this).find('.itemlink a').attr('href');
var img = $(this).find(".itemimg a").attr("href");
should work for you, and here is a fiddle: http://jsfiddle.net/hQeu3/
the reason .children doesn't works is that there are no immediate descendents that match this selector '.itemlink a'. jQuery grabs the divs (".itemlink"), and then tries to filter to the selector, which fails in this case. it is essentially equal to
$(this).children().filter('.itemlink a'); //won't work!
if you want to use children you could do
$(this).children('.itemlink').children("a").attr('href');
You could do as follows:
$('.galleryitem').each(function() {
var link = $('.itemlink > a', this).attr('href');
var img = $('.itemimg > a', this).attr('href');
});
which take into account that .itemlink and .itemimg are a direct parent of the <a> element.
Trying to add a data-rel to my javascript .attr Here is the original attr:
link.attr('href',obj.images.standard_resolution.url);
Here is what I've tried:
link.attr('href data-rel="lightframe"',obj.images.standard_resolution.url);
I also tried to making all the a links include it but with no luck:
$('a').attr('data-rel', 'lightframe');
Is this even possible? if so, what would be the correct syntax to use? I had a good read at http://api.jquery.com/attr/ but did not solve my issue?
EDIT: Markup here:
function ProcessData(response){
if(response != null){
var ul = $('<ul/>');
ul.attr({'class': tag_name});
$(response.data).each(function(index,obj){
if(index == 20)
return response.pagination.next_url;
var link = $('<a/>'), image = $('<img/>'), li = $('<li/>');
image.attr({'src': obj.images.standard_resolution.url,
'width':thumb_dimension,'height': thumb_dimension});
link.attr({'href' : obj.images.standard_resolution.url,'data-rel' : 'lightcase'});
image.appendTo(link);
link.appendTo(li);
if(include_username){
$('<div class="username">'+obj.from.username+'</div>').appendTo(li);
}
if(include_caption){
$('<div class="caption">'+obj.caption.text+'</div>').appendTo(li);
}
// Append the image (and text) to the list
ul.append(li);
});
// Append the list to the given div
$(div_to_add_pics).append(ul);
// make url correlate to the next set of data
url = response.pagination.next_url;
}
};
Try
var link = $('<a/>')
link.attr({
'href': obj.images.standard_resolution.url,
'data-rel' : 'lightframe'
});
or
link.attr('data-rel', 'lightframe');
A selector has yielded me a set of elements. Out the set of elements, I have 1 or 2 elements with CSS attribute display:none. I have to remove these elements and get the elements which have display. How can this be done using JQuery?
You can use .filter().
var displayed = $('mySelector').filter(function() {
var element = $(this);
if(element.css('display') == 'none') {
element.remove();
return false;
}
return true;
});
This will return all elements from your selector thats attribute display is not none, and remove those who's are.
$("selector").is(":visible")
You can also filter out the hidden elements in the original selector:
$("selector:visible")
You can use filter()
var listWithoutDisplayNone = elementList.filter(function(){
if($(this).css('display') != 'none')
return $(this);
});
I'm trying to get a location of an element in a jQuery set.
Here's what I tried so far.
I want to be able to do something like this:
$('ul').find('a').indexOf('.active');
And get the location of the .active in the set of a's.
Is there something like an indexOf() function for jQuery? The index() method doesn't work
if you pass a jQuery set ($searchFor) as an argument to the index method of another jQuery set ($searchIn) i.e.
$searchIn.index($searchFor)
it will return the index of $searchFor in the set $searchIn
In your example:
$('ul a').index($('ul a.active'));
You just need to give the index function a jQuery object:
var elements = $('ul a');
var index = elements.index(elements.filter('.active')); // 2
alert(index);
Live DEMO
There is no such function out of the box, it can be done easily like this:
var index = -1;
$('ul a').each(function(i){
if ($(this).hasClass('active')){
index = i;
return false;
}
});
alert(index);
Live DEMO
Your logic is sound, you're just grabbing the wrong element: http://jsfiddle.net/xz9dW/19/
var index = $('ul a.active').closest('li').index();
The a link has no index() value since it has no siblings; you have to grab the li
You can do this by just asking for it in the selector:
$('ul a.active')
What do you mean by getting the location however? Do you mean position? or URL?
If you would like to know which one you click on lets say.. You would use $(this) inside your event function. Here is an example which returns the current position of the element you click on, if there are multiple with the .active class:
To get the position:
$('ul a.active').click(function(){
alert( $(this).position() );
})
To get the URL location:
$('ul a.active').click(function(){
alert( $(this).attr('href') );
})