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.
Related
I want to prevent an anchor link to open on the document body and instead render inside a div. I've used e.preventDefault() but I think JQuery isn't targeting that event.
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div. The structure looks like this:
//this is just a structure, not the actual HTML
<div id="results">
<ul> .ulStyle
<li> .list-group-item
-header
-p .lead
-a .anchorStyle
</li>
</ul>
</div>
Then, I add classes to each element. Everything but the ul is getting the class and I think that may be why it's not targeting the anchors.
jQuery:
$(function(){
console.info('** anchor-tag click handler **')
/*
I've tried variations on the targeting from a
single $('.anchorStyle') to what you see below.
*/
$('div #results ul .ulStyle li .list-group-item a .anchorStyle')
.click(function(e) {
e.preventDefault();
$('#results').empty();
$('#results').load( this.getAttribute('href') );
console.log('anchor clicked...');
});
});
I get the first console message on reload but not the second on click.
Questions:
Do I need a class on the ul to target it properly? I'm only adding
it to the ul for that purpose.
Does this piece of code execute with everything else and the ul may not have been created yet? JS/jQuery should
still bind and keep listening to an event if it exists - or in this
case, find the element I'm targeting after the click event fires,
no?
Couple of problems in the code to point out...
First is that the selectors are not right. You have a space after your element and it's class which is wrong (Eg:ul .ulStyle here .ulStyle is considered as a child of ul).The selector must be like this
$('div#results ul.ulStyle li.list-group-item a.anchorStyle')
Notice I have removed the spaces between the element and it's class..
Even after getting this changes done it still won't work for you because the elements are added dynamically. Taking this line from the OP
I'm programmatic-ly creating a ul and appending li's to it from array items then appending the ul to a div.
So this calls for a need to use event delegation
The syntax must change to
$(document).on('click','div#results ul.ulStyle li.list-group-item a.anchorStyle',function(){//your stuff here});
Further you can keep the selector simple as
'#results a.anchorStyle'
Here you have a working example with your structure:
$('#results ul li a').click(function(e){
e.preventDefault();
console.log(this.href);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<ul>
<li>
<header>HEADER</header>
<p></p>
ANCHOR
</li>
</ul>
</div>
function showTweet(username) {
$( "<ul/>", {
"class": "my-user-list",
html: usertweets[username].join( "<li/>" )
}).appendTo( $("#tweets") );
}
So I see that the selector is targeting an unordered list, but what comes after the comma and why is it in curly brackets?
I understand the .append portion. I do not understand what "class": "my-user-list" and html: usertweets[username].join( "<li/>") do. Note that usertweets is an array.
Any insight would be greatly appreciated!
The selector is not targeting a ul - it is creating one. The second parameter is an object that contains the properties to set on the new ul element. It is then added to the DOM by appending it to the #tweets element.
To show the difference:
// to create a ul element in memory
$('<ul></ul>'); // or...
$('<ul />');
// select all ul elements currently in the DOM
$('ul');
The curly brackets are for PlainObject which is plain JavaScript object. From that I would read
Please create me a <ul> with class my-user-list with html of lists of usertweets joined with <li/> and append that to <ul> and append the ul to an element with id tweets
Here's the example
http://jsfiddle.net/xz6a0yqy/
It's not targeting ul, it first creates a <ul> element, and set the <ul>'s class to "my-user-list", then set its the html inside it to usertweets[username].join("<li/>"), which should creates some <li>, and finally append the newly created <ul> and the <li>s inside it to $("#tweets").
You can see more from jQuery#.jQuery().
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");
I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much
Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/
First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO
Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)
On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)
I want to hide everything under (but leave the ones above) the element that was clicked by the user. Check out this demo: http://jsfiddle.net/dS2vA/
So if you click on the 2nd <li> the three <li>s under it should be hidden. If you click the 4th <li>, only the 5th element should be hidden.
I tried doing it with :not('clicked') but that targets the elements above the clicked element, as well.
Any ideas?
Just use the following:
$(this).nextAll().hide();
DEMO: http://jsfiddle.net/dS2vA/1/
Try something like this:
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass();
})
$(this).nextAll("li").slice(0,3).addClass('clicked');
})
in addition to VisioN's answer, to be more specific you can add a selector filter ("li") to nextAll() like this:
$(this).nextAll("li").hide();