I have list of links, and if you click on any of them, it will toggle show/hide text below it in separate div. Also it hides all other divs if one of them is shown
This code manages it:
$(document).ready(function(){
$('.targetDiv').hide();
$('.hideshow').click(function () {
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});});
And this is what the link looks like
<a class="hideshow" target="1"><div class="cennikPlus"><i class="fa fa-plus-square"></i></div>Something something</a>
What i need to do is to change
fa-plus-square
to
fa-minus-square
when open and back, when closed.
I found "toggleClass" which should be useful in this case, but I am not sure how to select i inside div inside a
Can you help me with this?
Also the website is here
Find the <i> and call toggleClass
$(this).find("i").toggleClass("fa-plus-square fa-minus-square")
To select the <i> inside your tag, you just do this:
$( this ).find( 'i' )
you can chain it all together to toggle the class--
$( this ).find( 'i' ).toggleClass( 'fa-plus-square fa-minus-square' )
and for siblings, if you want them all to have the class 'fa-minus-square', you do this:
$( this ).siblings().find( 'i' ).removeClass( 'fa-plus-square' ).addClass( 'fa-minus-square' )
Using parent - child selectors in jQuery is quite simple...
$("a > div > i")
will select the i element, that is a child of the div element, that is a child of the a element. http://www.w3schools.com/jquery/sel_parent_child.asp.
If the elements are not going to be direct descendants, as in your example, remove the greater than sign.
$("a div i")
Allright... this is my first time adding jQuery code to existing one so I tried to do something, it didnt work so i thought i did it wrong, but only mistake was selecting "li" instead of "i" element Solution was to add this line before the last line:
$(this).children('div').children('i').toggleClass("fa-plus-square fa-minus-square");
Related
SO for each div with ".protected_wrap" class I am needed to go up 3 levels, then add a class or css to that div.
my code
$( "div.protected_wrap" ).parents().eq(2).className( "hidephotos" )
$( "div.protected_wrap" ).parents().eq(2).css( "display", "none" );
the 3rd div up is ".photo_item_wrap" but nothing is being done as far as adding css or a class.
seems nothing is happening though
You should look into .closest()
It gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
This should do the trick:
$( "div.protected_wrap" ).closest('.photo_item_wrap').css( "display", "none" );
You could also use .parents() like you're doing but you need to specify the selector like this
$( "div.protected_wrap" ).parents('.photo_item_wrap').css( "display", "none" );
The thing is with .parents(); it will find all the ancestors with the specified selector. So if you have multiple parent elements with that selector, I suggest you use .closest()
Side notes
You can use .hide() instead of .css("display", "none")
To add a class to an element, use .addClass()
I have the following HTML structure and JavaScript file:
.html
<li>
<button class="show-more"></button>
some more elements
<div class="hidden"></div>
</li>
JavaScript
$( ".show-more" ).click(function() {
event.preventDefault();
$( this ).next().slideToggle( "fast", function() {
});
});
I need the click event to toggle the next first instance of .hidden, however the click event is targeting the first element after it and not the next instance of .hidden, any ideas how I can go about it?
nextAll and first:
$(this).nextAll('.hidden').first().slideToggle(...);
This question has more about this: Efficient, concise way to find next matching sibling?
Another possible solution:
$('~.hidden:first', this).slideToggle("fast");
This will match for the first, next sibling of the class .hidden in the context of this.
The ~-selector will reach all following siblings.
Demo
Reference
Next sibling selector
first selector
context of selector
OK, so I am sorry if this question is repeated BUT I really could not figure answer.
O have menu with classes, and I want that when I click on some menu items .menuitem > a
that link have more paddingBottom.
So I managed to use .click function and animate function but that add padding to entire class ( all menu items ).
What I need is adding padding only to THAT CLICKED menu.
Code that make padding to all menu items ( entire class )
$(".menuitem" ).click(function() {
$('.mainNav > ul > li > a').animate({paddingBottom:"+=17px"});
});
when I click on some menu items .menuitem > a that link have more paddingBottom
Within the click handler, the particular .menuitem element that was clicked can be referred to by this. Thus, using $(this) you can use jQuery's DOM traversal method(s) to move from that element to the related one you want to animate.
If the anchor is a child of the .menuitem element that you are binding the click handler to then the simplest way to get a reference to that anchor is with the .find() method:
$( ".menuitem" ).click(function() {
$(this).find("a").animate({paddingBottom:"+=17px"});
});
you can use this key word to select your 'a' tag which you click on it now 'only'
$('.menuitem').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
or more specific
$('.menuitem li').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
I want to hide all other LI's in a certain UL except the LI that I select.
<ul>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul>
<li><div></div></li> -- HIDE
<li><div></div></li> -- SELECT
<li><div></div></li> -- HIDE
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
</ul>
How can I solve this the best way?
I've tried using indexes, but having some problems getting it to work, and selecting the correct UL. As you may see, I've got no class on the UL's or LI's so I think the only option is LI's.
What I really do, is selecting a div inside the LI so, I get the selected LI's index by:
var li_index = $(this).parent().index();
You traverse the DOM up from the div that was clicked then hide the other elements with .not($(this).parent()).toggle() -> Not the li that surrounds this div
$('div').click(function () {
$(this).closest('ul').find('li').not($(this).parent()).toggle();
});
.toggle() can be replaced with .hide() if you don't want the User to be able to reverse their decision.
JS Fiddle: http://jsfiddle.net/tDmy3/2/
Tried something like this?
$(this).closest('ul').find('li').not(this).hide();
Or
$('li', $(this).closest('ul')).not(this).hide();
Get a jQuery element set with all relevant <li> elements, then remove the selected element. For example:
$('ul#mylist li').not(selector).hide();
From the JQuery documentation:
Given a jQuery object that represents a set of DOM elements, the .not() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don't match the selector will be included in the result.
Instead of a selector, you can also give the element object itself if you have a reference to it.
This should work:
$( 'ul li' ).click( function( e ) {
// by default, hide all li's
$( 'ul li' ).hide();
// show only the selected li
$( this ).show();
});
http://jsfiddle.net/BqKun/
Hope this helps.
How do I limit an event to a single element in a jQuery collection?
In the case below, I've tried using .one() to limit the behaviour (inserting the <li class='close'>Close</li> line of HTML) to a single instance. The behaviour does indeed happen only once, but on EVERY matched element of $( "ul>li>a" ). How do I make it happen only once, to only ONE of the matched elements in the collection?
Any ideas?
$( "ul>li>a" ).one(
"click",
function(){
$( "ul ul")
.prepend("<li class='close'>Close</li>")
}
);
Thanks in advance.
-AS
A jQuery selection returns an array. Therefore $("selection")[0] can work. However there are better abstracted methods for this, like .get(0) or .first() (in case you're looking for the first element of the selection/array).
$("selection").get(index) returns the pure DOM element (at that specific index) of the selection, and is not wrapped in the jQuery object.
$("selection").first() returns the first element of the selection, and wraps it in a jQuery object.
So if you don't necessarely want to return the first element, but still want jQuery functionality, you can do $($("selection").get(index)).
Given your situation, this should work fine:
// bind the 'onclick' event only on the first element of the selection
$( "ul>li>a" ).first().click(function() {
$( "ul ul").prepend("<li class='close'>Close</li>");
});
Which is equivalent to this:
$($( "ul>li>a" ).get(0)).click(function() {
$( "ul ul").prepend("<li class='close'>Close</li>");
});
And this:
$($( "ul>li>a" )[0]).click(function() {
$( "ul ul").prepend("<li class='close'>Close</li>");
});
I must disagree with Ryan, working on the CSS selection string to filter the result is rather expensive compared to the native JavaScript array functionality.
Try first(), it selects the first element:
$( "ul>li>a" ).first().one('click',
function(){
$( "ul ul").prepend("<li class='close'>Close</li>")
}
);
one() is used, as you already noticed, to handle an event only once.
You have to specify the index of the element you want to work with.
If your selector returns more than one element you can do one of a couple things...
You can isolate your elements by giving them a class or id attribute in your html and alter the selector to select only the class/id of the element/s you wish to select or you can specify the index of the element you're trying to work with. The later method is a bit sloppy but works as long as your page structure doesn't ever change.
So for the first method I spoke of you'd change your selector to this after applying a class/id to your elements:
$("ul>li>a.class")
or
$("ul>li>a#id")
For the second method I mentioned you'd change your selector to this:
$("ul>li>a:eq(index)")
Where index is the zero based index of the element you're trying to select.
You can call the first method, which will return a new jQuery object containing only the first element in the original one.
However, in your case, you might as well use the (equivalent) :first selector, like this:
$("ul > li > a:first").click(function() { ... });
If you only want to handle the first click event and ignore any subsequent clicks, you'll need to use .one(), like you already are.
You need to combine first() with one():
$( "ul>li>a" ).first().one('click', function () {});
More general:
$( "ul>li>a:eq(n)" ).one('click', function () {});