I am trying to fade out a clicked ul element. Here is the thing, I have multiple ul elements that contain the same class name for when selecting. To handle that I am phasing out a id for each specific ul to know which element to fade out. My issue is though, when trying to fade out the ul element. Nothing happens at all, even though it contains the correct id.
Here is what I am doing:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $($(this).parent().parent().attr('id'));
$($thisOne.selector).fadeOut();
});
When I alert the $thisOne.selector it displays the correct id of that selected ul element. I just don't know why it wont fade out though?
Suggestions, thoughts?
Don't use its selector, just use the element object:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$(this).parent().parent().fadeOut();
});
Try these two approaches:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $(this).parent().parent();
$thisOne.fadeOut();
});
or
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $($(this).parent().parent().attr('id'));
$("#"+$thisOne).fadeOut();
});
The first one $thisOne is the ul you are trying to select and fadeout. So just fading it out should work.
In the second approach, $thisOne is an id string, so to select it correctly with jQuery the correct syntaxis is $("#idString")
Related
I am using the following piece of code in order to add a class to an li item.
JavaScript
$(document).on('click', '.sidenav .page_item_has_children', function({
$(this).addClass('side_open').siblings.removeClass('side_open')
})
As you can see It refers to the element that is clicked, in this instance an li. I need to apply this to the li's child element which is a ul so that the dropdown can appear. I assume I basically need something along the lines of the following however I can not work it out.
$(document).on('click', '.sidenav .page_item_has_children', function({
$(child).addClass('side_open').siblings.removeClass('side_open')
})
If anyone has any ideas on how this can be done that would be great!
Thanks - Scott
Using jQuery you could try jQuery(this).find('ul') or jQuery(this).children('ul');
See also: How to get the children of the $(this) selector?
Use $(this).find('ul'); to return all ul that are descendants of the li u referenced or $(this).children('ul') to find only 1st-level descendants.
In my html code i change the background color of all elements with the id '#mutable', with a click on button 'blue' or 'red'.
With the third button 'load' i .append() a new HTML with the same id.
But the background color does not change for the new elements?
Whats going wrong?
fiddle
html
<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>
js
$(document).ready(function() {
$('#blue').on('click', function() {
$('#mutable').trigger('blue');
});
$('#red').on('click', function() {
$('#mutable').trigger('red');
});
$('#load').live('click', function(event) {
event.preventDefault();
$('#newHTML').after('<div id=\"mutable\" style=\"width:50px;height:50px;\">...</div>');
event.stopPropagation();
});
$('#mutable').bind('red', function(e) {
$('#mutable').addClass('red').removeClass('blue');
});
$('#mutable').bind('blue', function(e) {
$('#mutable').addClass('blue').removeClass('red');
});
});
You are always creating a new div with the id #mutable. Now jQuery in terms of an ID just runs down the DOM and when it finds the first occurance of your ID, it changes it, but nothing else.
For some solutions, you could use a class .mutable instead of an id - but then every created div would be changed on click.
Or you could enumerate your IDs with a number like #mutable1, #mutable2 and so on and change your menu to select the specific div.
Or, to change just the last occurance of your dynamically created divs, use the :last - CSS- Pseudoclass.
1) id should be unique at page. And selectors like #mutable match only first element with such id -- So after pressing 'load' you create new element with the same id, but $ still match old one
2) try next ( I just change your id-selector into attr-selector which allow find all elements with id ):
$('#mutable').bind('blue', function(e) {
//alert('blue');
$('[id=mutable]:last').addClass('blue').removeClass('red');
});
http://jsfiddle.net/q3wzwr6z/
The image gallery that I'm making uses jquery clone to duplicate the image thumbnail that is clicked on and appends it to the #big div, this helps with centering and fixed positioning. The problem I'm having is when I click #right_arrow or #left_arrow, I can't seem to figure out how to select the next or previous item in the list and append that to the body.
I know jquery has .next() but I'm having trouble figuring out how that works.
here's the jsFiddle: http://jsfiddle.net/reveries/UgQre/
$(document).ready
$('img, div.wrapper').each( function() {
var $img = $(this);
$img.addClass('thumbnail');
$img.wrap('<li></li>');
$img.click(function() {
$img.clone().appendTo('#big');
$('#big').fadeToggle('slow');
$('#right_arrow').fadeIn('slow');
$('#left_arrow').fadeIn('slow');
});
$('#big').click(function(){
$img.addClass('thumbnail');
$('#big').fadeOut('slow');
$(this).html('');
$('#right_arrow').fadeOut('slow');
$('#left_arrow').fadeOut('slow');
})
$('#right_arrow').click(function(){
$('#big').html('');
})
$('#left_arrow').click(function(){
$('#big').html('');
})
});
Here is a fixed version of your fiddle: http://jsfiddle.net/abeisgreat/fu3fX/
Your code has a few issues that keep it from working properly. Firstly, your .click() calls are within your .each, which means that #big, #right_arrow, #left_arrow will all have multiple bindings of the same function, which isn't what you want.
Secondly, you're right in assuming that .next() and .prev() is what you want to use, the problem is that $img.next() doesn't exist because you're wrapping each img in an li tag in your .each(). Because of this $img has no sibilings and .next() and .prev() will be not return the next img tag. So you really need to call $img.parent().next().children(), to get the next image.
The only major change I made was to add a global called $selected_li, which contains the li of the selected image. Once we have that, we can do this.
$('#left_arrow').click(function(){
$('#big').html('');
$selected_li.prev('li').children('img').clone().appendTo('#big');
$selected_li = $selected_li.prev('li')
})
To progress backwards or the exact same with .next() to move forward. You were very close, like I said I think the big issue was the wrapping with li which removed any sibilings from your img tags!
Hope this helps,
Abe
I'm trying to remove all hyperlinks from the selected li with jquery but doesn't seems to work properly. When is clicked all my hyperlinks getting removed. A detaliet view of my code http://jsfiddle.net/78kAu/1/. The event what is firing the code looks as it follows
$('a').click(function(){
var selected = $(this).attr('class');
var row = $('.elements li').length;
alert(selected);
$("a").remove();
});
Instead of
$("a").remove();
you want:
$(this).remove();
What you've got says "find all the <a> elements on the page, and remove each of them."
If you want to remove all the <a> elements from some container above the clicked element, like an <li>, you'd do this:
$(this).closest('li').find('a').remove();
I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>
It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.
Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Check out the jQuery selectors and why not just use $(this)?
$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});
Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.