I am trying to create a nested list. When clicking on an <li> an unordered list should be appended to the <li> that was clicked on.
After clicking the first <li> my code fails and does not append lists to the newly inserted <li>. I would like add the unordered list to the any <li> that is in the list.
Here is a fiddle: http://jsfiddle.net/s9204kyh/
Here is my JavaScript:
$('li').on('click', function() {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(this).append(html);
});
Here is my HTML:
<div class="container">
<ul>
<li class="click">Click to add a nested list item</li>
</ul>
</div>
Here's one way. I'm not sure if it's exactly what you need.
You can delegate the event handling to the .container, and check some criteria to see if the <li> is appropriate for appending a new list. In my example, a new list is only appended if the clicked <li> does not already container a <ul> tag.
JS (jQuery):
var html = '<ul><li>Click to add a nested list item</li></ul>';
$('.container').on('click', 'li', function(e) {
$(e.target).filter(':not(:has(ul))').append(html);
});
Here's a fiddle.
Thanks to Mike'Pomax'Kamermans for pointing to the flaw in my original code.
Here is the JavaScript I was looking for:
$('li').on('click', function(e) {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(e.target).append(html);
});
I need a help for you.
JS with JQuery
var addNestedListItem = function(ev) {
var html = '<ul><li>Click to add a nested list item</li></ul>';
$(ev.target).parent().append(html);
$('li').off('click').on('click', addNestedListItem);
};
$('li').on('click', addNestedListItem);
HTML
<div class="container">
<ul>
<li class="click">Click to add a nested list item</li>
</ul>
</div>
jsfiddle : http://jsfiddle.net/vfb8yare/
Related
I have a problem dealing with duplicate ID's. I'm also aware it's very bad practise to have elements with the same ID but in this case, I'll end up having to change a massive part of the application to change the ID's so they can be unique.
I am having a problem toggling classes on an element in jQuery. My structure is below:
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
What I'm needing is a function where if I click the first instance of ID wl-7050, the child elements receive a new class. Whereas, if I select the second (single) element with ID of wl-7050 then only that one element has the new classes added to it.
I've tried using jQuery along with it's :first & :eq(0) attributes but still no luck unfortunately.
I do have classes assigned to each li element and it's child elements but whenever I run $('#wl-7050:eq(0)'), it returns both and the parent wl-7050 element get's used also.
I am flexible with JavaScript and jQuery answers.
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
You can't have two wl-7050. Use classes. Then to work on "add new class on click" it's just hard code. If you need a help I can edit my answer. But is just coding. Html IDs is a concept
I've been there before: I've had to deal with applications that do weird things, where changing them to be "correct" causes more grief than just dealing with it and moving on. You know duplicate IDs are bad, I know duplicate IDs are bad; let's sort the problem. (Yes, they're bad. Yes, they shouldn't be there. Unfortunately, there they are.)
You can treat IDs just like any other attribute on an element: they're attributes, albeit special ones. Code like this will work to select all elements with the same ID: $('[id=wl-7050]').
Now, we need to bind a click event to them. We'll do the same thing as we always do:
var lis = $('[id=wl-7050]').click(function(e){
console.log(this);
});
Here's the trick, and it would happen even if these elements all had different IDs: when you're clicking in a child LI, that click event will bubble up to the parent. We'll need to shut off event propagation so we don't trigger our click event twice:
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
console.log(this);
});
Now we're in business and can work to figure out which type of LI we're working with: top-level or child.
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
if ($(this).children('li').length > 0) {
// Top-level LI
}
else {
// Child-level LI
}
});
That should get you where you need to be. Let's all agree to never speak of those duplicate IDs again.
If you can't change the IDs, you could try adding a different class name to both elements:
<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050" class="wl-7050-single">
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
Then you query with:
$("#wl-7050.wl-7050-main");
$("#wl-7050.wl-7050-single");
You don't need to add an id to each li that would make it overly complicated. Just use classes inside your items and call them this way:
$("#group li").on("click", function(){
alert($(this).data("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="header"></div>
<div id="body">
<ul id="group">
<li data-id="1"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="2"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="3"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
</ul>
</div>
</li>
</ul>
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
can you help me with an ideea how i could remove items from a list after i click an item? let's say i have a list with 5 items and i press on the 3rd item, i want item4 and item5 to be removed. I want to remove all items after the one clicked in the list.Here is an html
<div class="row bcrumb">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item">Item5</li>
</ol>
</div>
</div>
Remove all list items after the clicked item:
$('.item').on('click', function(e) {
e.preventDefault();
$(this).nextAll().remove();
});
Codepen
You can use nth:child selector to remove any item from a list like this:
$('ul li:nth-child(4)').remove();
$('ul li:nth-child(5)').remove();
However the question is a bit vague as to whether you want only those items to be removed on clicking 3rd item all the time or it should be a generic rule for other li items as well.
Because of this I cannot suggest which click event you should hook into. However I show you how to hook into 3rd li click:
$('ul li:nth-child(3)').click(function) {
console.log("3rd item clicked");
});
I'm seeking help to see if it's possible to reorder the items in a navigation bar. The bar itself is created by a module within a CMS that is locked to editing.
As such, I'd like to reorder the "buttons" so that the 4th option will move to be the 1st in the menu bar.
The locked module creates the following HTML:
<div class="navigation-primary">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
</div>
Could I accomplish this with Javascript or jQuery?
Use document.querySelectorAll() to get the list items, and a reference to the ul. Then prepend the last list item to the ul:
var listItems = document.querySelectorAll('.navigation-primary li');
document.querySelector('.navigation-primary > ul').prepend(listItems[listItems.length - 1]);
<div class="navigation-primary">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
</div>
I'm completely STUCK with this very simple task, I would be glad for any advice.
I've created a dropdown menu for user selection using <ul> and <li>. Once the user clicks on a certain menu Item (from the class submen), this item gets the class active assigned to it.
<ul id="firstid">
<li id="secondid">Title1
<ul class = "submen">
<li class = "active">Option1</li>
<li>Option2</li>
</ul>
</li>
</ul>
Now I want to retrieve the text "Option1" since the user has selected this item in the above example and its class is active. How do I go about this using jQuery? This doesn't seem to work:
var selected_option = $("#secondid" ".submen" ".active" "a").text();
Chained selector looks like this:
var selected_option = $("#secondid .submen .active a").text();