Im dynamically populating a UL list. This could contain 1 up to 5 items
I want to be able to show the first list item, and then on a click of a button in that list item hide it and show the next.
I have this so far -
HTML Structure
<ul class="grid">
<li class="object">
List Item 1
<a class="show-next">Show the next list item</a>
<li>
</ul>
Javascript
$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
$(".grid").find(".object").hide().next().show();
});
This code unfortunately is showing all the list items in the UL instead of just the next one.
Anyone give me a hand?
Thanks
Try adding
.removeClass(active);
You could change your code so that you add an active class to the active element, because right now $(".grid").find(".object") is finding all the li objects in your ul, hiding them, looking for the next sibling for every element, and then showing those elements ... that's going to show every element in the list. With an active class added to the currently active button, that would prevent your query from finding all the li elements in the ul.
So for instance:
$('.show-next').click(function(ev){
$(".grid").find(".object.active").hide().next().show().addClass("active");
$(this).parent().removeClass("active");
});
The closing tag for your li is missing the backslash, e.g. </li> instead of <li>.
Apart from that, try this:
$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
$(".grid").find(".object").hide();
$(this).parent().next().show();
return false;
});
I have put together an example fiddle here: https://jsfiddle.net/utvgLqp6/
Please note that there's no sanity checking to see if it's the last item in the list or not.
Also, if you want to use this on dynamically created elements, you will need to do
$(document).on('click', '.show-next', function() {
instead
First of all your are not closing each list item with </li>. You can take help of parent() to find the parent of the clicked element & then, can hide it & can show the next list item using next()
$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
$(this).parent().hide().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid">
<li class="object">
List Item 1
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 2
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 3
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 4
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 5
<a class="show-next">Show the next list item</a>
</li>
</ul>
How's this: https://jsfiddle.net/fznk3ube/2/ I have updated the code and I believe it now includes all the functionality you asked for.
$(document).ready(function () {
$('.object').hide();
var clickListArray = $('.object').toArray();
$(clickListArray[0]).show();
$('.show-next').on("click", function () {
var thisParent = $(this).parent();
var nextInList = $(thisParent).next();
$(thisParent).hide();
$(nextInList).show();
});
});
Below is the code.
<ul class="grid">
<li class="object">
List Item 1<a class="show-next"> Show the next list item</a>
</li>
<li class="object">
List Item 2
<a class="show-next">Show the next list item</a>
</li>
<li class="object">
List Item 3
<a class="show-next">Show the next list item</a>
</li>
</ul>
Below is the script you should insert.
$('.grid .object').hide().filter(':lt(1)').show();
$('.show-next').click(function(){
$eL = $('.grid .object').filter(":visible");
// $(".grid").find(".object").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}else{
$('.grid .object')[0].show();
}
});
Fiddle
Related
I have the following list of two items I'm using to filter content.
On page load, I want the first list item to be active and show the contents of "mine".
However, the second list item is showing the results instead. In order for the contents below this list to show the "My Dashboards" properly, I must click on it. I want this functionality on page load too.
I experimented with many jQuery click events on page load but nothing seems to work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filtering" class="clearfix nav nav-tabs">
<li class="filter-item active" data-rel="mine">My Dashboards</li>
<li class="filter-item" data-rel="allAvail">All Available Dashboards</li>
</ul>
<li class="mine allAvail">Item 1</li>
<li class="mine">Item 2</li>
<li class="mine allAvail">Item 3</li>
$(document).ready(function(){
$('.filter-item').click(function(){
// reset active class
$('.filter-item').removeClass("active");
// add active class to selected
$(this).addClass("active");
// return needed to make function work
return false;
});
$(function() {
// create an empty variable
var selectedClass = "";
// call function when item is clicked
$(".filter-item").click(function(){
// assigns class to selected item
selectedClass = $(this).attr("data-rel");
// fades out all portfolio items
$(".portfolio li").fadeOut(300);
// fades in selected category
$(".portfolio li." + selectedClass).delay(300).fadeIn(500);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have Menu list which contains Sub-Menu as shown in the code below.
<li class="current">
<span class="icon4"></span>Subscriptions
<ul class="sub-menu">
<li>View Subscriptions
</li>
<li class="#((ViewBag.PageName == " Subscription ") ? "active " : " ")">Manage Subscription Plans
</li>
</ul>
</li>
<li class="current">
<span class="icon5"></span>Administration
<ul class="sub-menu">
<li class="#((ViewBag.PageName == " AssetPage ") ? "active " : " ")">Assets
</li>
<li>Configure Text
</li>
<li>Error Log
</li>
<li>Product Settings
</li>
</ul>
</li>
<li class="current">
<span class="icon6"></span>Promo Codes
<ul class="sub-menu">
<li>Manage Promo Code
</li>
<li>Used Promo Code
</li>
</ul>
</li>
Here Subscription,Administration,Promo Codes are Menu Lists which contains Sub-Menu Lists under them.
The thing is I want to apply class=current dynamically when a user clicks on Subscription,Administration,Promo Codes`.
And I am doing this in LayoutPage of MVC.
Any help will be appreciated.
Here you have a working solution: https://jsfiddle.net/c4h3sup9/
You have to use a little bit of Javascript for that.
You have to give the listitems a other class name like in my example "operator"
document.body.addEventListener("click", function(e){
if(e.target && e.target.className == "operator"){
var actives = document.getElementsByClassName("active");
actives[0].setAttribute("class", "operator");
e.target.setAttribute("class", "active");
}
});
for this example you need to assing one element as active from the beginning.
Note:
LI elements are never parents of UL.
The order is:
Unordered List (Plural) -> List item (Singular, Child).
You might want to correct that as it is not standard conform.
To add the class name to the parent <li> element, give the main links a class name. Assuming you also want to remove it from any <li> elements that already have it, also give them a class name
<li class="container">
<span class="icon4"></span>Subscriptions
and the script will be
$('.mainmenu').click(function() {
$('.container').removeClass('current'); // remove any previous
$(this).closest('.container').addClass('current');
});
In addition, if when you navigate to one of the views with this layout, and what to add the class name to the appropriate element, then you can give the <li> elements an id attribute
<li id="subscriptions" class="container">
....
</li>
<li id="administration" class="container">
....
and in the GET method, pass the value of the id to the view (e.g. using ViewBag
public ActionResult ConfigureText()
{
ViewBag.Menu = "administration";
....
return View(...);
}
and add a script that runs when the page first loads
var menu = '#ViewBag.Menu";
$('#' + menu).addClass('current');
I need to acces an element that has a certain style.
This is my structure
<ul>
<li> Hi </li>
<li> bye </li>
<li> third one </li>
</ul>
The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:
<ul>
<li> Hi </li>
<li> bye </li>
<li style:"display:none;"> third one </li>
</ul>
Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?
I was thinking of something in the form of:
var myId = $("#slider > ul li").last().attr("id");
But obviously I always get the ID of the item that is hidden since its still there.
Can I do something like select last where !display:hidden ?
Can I do something like select last where !display:hidden ?
Yes, with jQuery's :visible pseudo-class:
var myId = $("#slider > ul li:visible").last().attr("id");
(Note: Your li elements don't actually have id values, but that's a tweak.)
Live Example:
var listItem = $("#slider > ul li:visible").last();
$("<p>")
.text("Text of last visible item: " + listItem.text())
.appendTo(document.body);
<div id="slider">
<ul>
<li>Hi</li>
<li>bye</li>
<li style="display:none;">third one</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Can use ':visible' selector
var myId = $("#slider > ul li:visible").last().attr("id");
It should work using:
$("#slider > ul li:visible").last().attr("id");
https://api.jquery.com/visible-selector/
so your inline styling is a bit off it should be
<ul>
<li> Hi </li>
<li> bye </li>
<li style="display:none;"> third one </li>
</ul>
You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:
$('ul').children().each(function(e) {
if($(this)[0].style.display == 'none') {
console.log($(this).prev());
}
})
I have two lists which are sortable and then a button. The user adds items from the first list to the second list and then when they click the button I have some script collect the list item id's from the second list. This part works as intended.
My problem comes when the user accidentally adds an item to the second list that they want to remove. I have a trash can icon that works to removes the item from the list, but then when you hit the button to get the array, it still includes the deleted list item in the array. How do I avoid this? Should I be building the array as the items are added and removed, or is it OK to only build it once after they are done moving list items around like I have done here?
Thanks for taking a look!
http://jsfiddle.net/vYu5k/
<div class="avail_segments_wrap">
<ul id="available" class="segments_available">Available Segments
<li id="1"><span class="title">Item 1</span></li>
<li id="2"><span class="title">Item 2</span></li>
<li id="3"><span class="title">Item 3</span></li>
<li id="4"><span class="title">Item 4</span></li>
<li id="5"><span class="title">Item 5</span></li>
<li id="6"><span class="title">Item 6</span></li>
</ul>
</div>
<br>
<div class="chosen_segments_wrap">
<ul id="chosen" class="segments_chosen">Chosen Segments
</ul>
</div>
<button type="button" id="button1">Button1</button>
jquery:
//make lists sortable
$("#available").sortable({
connectWith: "#chosen"
});
$("#chosen").sortable({
connectWith: "#available"
});
//make add and trash icons functional
$('.ui-icon-add, .ui-icon-delete').on('click', function() {
item = $(this).parent();
item.fadeOut(function() {
if (item.parent().attr('id') == 'chosen') {
$('#available').remove(item.fadeIn());
} else {
$('#chosen').append(item.fadeIn());
}
});
});
//hit button to collect all li id's from ul "chosen".
$("#button1").click( function()
{
var chosenArray = [];
$('#chosen li').each(function(){
chosenArray.push($(this).attr('id'));
});
alert(chosenArray)
}
);
Fiddle Demo
$("#button1").click(function () {
var chosenArray = [];
$('#chosen li:visible').each(function () {
You are hiding the li on delete. But when you create array you are taking all li elements
you need to select only visible elements $('#chosen li:visible').
Read :visible
I'm looking for a solution, it must work in IE also, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn't hide until a user clicks on the next link...
Please check this link
http://jsfiddle.net/varada/YLX9x/
you can use jquery hide() and show() functions for that.
Let the id of div that is to be hidden be hidden_div, let menu item be menu_item, next button be next,
Import the jquery.js
and write the ready function as below..
$(document).ready(function() {
$('#menu_item').click(function() {
$('#hidden_div').show();
});
$('#next').click(function() {
$('#hidden_div').hide();
});
});
or if you mean the content be visible till he click the next link on the menu item, add a class name say, menu_class to the menu items and write the code
$('.menu_class').click(function() {
$('#hidden_div').hide();
});
instead of $('#next').click(function()
if you have a menu like
<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>
and the div
<div id='hidde_div' style='display:none'>
content
</div>
then if you click item 2 the div will get displayed. and if you click item 1 or item 3 it will get hidden. make sure you are using the code $('.menu_class').click(function() {
html:
<li class="main">Web
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li class="main">IT
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</li>
<li class="main">ITES
<ul>
<li>BPO</li>
<li>Online Portal</li>
<li>Online Marketing</li>
</ul>
</li>
js:
$(document).ready(function(){
$('li ul:not(:first)').hide();
$('ul li').click(function(){
$(this).closest('.main').next().find('ul').show();
$(this).closest('ul').hide();
});
});
http://jsfiddle.net/7QheB/