I am trying to wrap each li in a div .new which works fine when the li doesn't have any children <ul><li></li></ul>.
but when it is in following format
<li>XRP 1
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP 2</li>
<li>XRP 3</li>
It wraps lis in new in the hierarchy several times
$( "li" ).wrap( "<div class='new'></div>" );
.new {
border:1px solid #ccc;
margin:5px;
}
is there any way that I can add open and closing tag before each item?
If this is what you want to do (I'm not sure):
<ul>
<div><li></li></div>
</ul>
This is not valid HTML.
Explanation here: Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }
Related
I would like to create an expandable tree with unordered list. The deepness is not limited in my case.
I have to keep the text in the list elements as it is, this way I need to add an extra span element to every parent to have a clickable item.
I have tried to add this span tag with jQuery, and this finds the li objects, but in the result only the first occurrance is visible.
The HTML code is this.
<ul class="list">
<li>
Categories
<ul>
<li>
Parent
<ul>
<li>link 1 link 2 link 3</li>
<li>link 1 link 2 link 3</li>
</ul>
</li>
<li>
Parent
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My jQuery script is below.
$(document).ready(function(){
$(".list").each(function () {
$(this).find('li').each(function(index, element){
var text = $(this).html();
text = "<span class=\"trigger\">+</span> " + text;
$(element).html(text);
});
});
$('.list > li span').click(function(){
$(this).parent().children('ul').toggle();
if($(this).text() == '+') {
$(this).text('-');
}
else {
$(this).text('+');
}
});
});
jsFiddle: https://jsfiddle.net/pegapega/2f20s90v/
My expected result would be for every li element:
<li><span class="trigger">+</span>[original content]</li>
Why the span element is not added to all of the li elements?
I'm unsure exactly why your code example didn't work, but here is an example that does work based on you original.
$('li').each(function(i, e){
$(e).prepend('<span class="trigger">+</span>');
});
$('span').on('click', function(e){
$(e.target).next('ul').toggleClass('show');
if( $(e.target).text() == '+') {
$(e.target).text('-');
} else {
$(e.target).text('+');
}
});
span.trigger {
cursor: pointer;
}
ul {
display: none;
list-style-type: none;
padding-left: 30px;
font-size: 18px;
font-family: "Open Sans", sans-serif;
}
ul.show {
display: block;
}
ul.list {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
Root
<ul>
<li>
Parent
<ul>
<li>link 1 link 2 link 3</li>
<li>link 1 link 2 link 3</li>
</ul>
</li>
<li>
Parent
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Stackoverflows snippet editor seemed to have some problem with toggle() so I just replaced it with toggleClass() just so the example would work.
I am trying to do a multilevel selection bar. But I am not sure how to create this type of bar. I have tried to use the common navigation bar method, but is doesn't work out the way i wanted.
I want to do something like this, and here is the photo for references:
Any suggestion on how to do it? Or any similar examples? (Please show in fiddle example.)
Thank you!
You want to create a multi-level unordered list, with each list item that has children, containing another unordered list. E.G.
<ul class="parent">
<li>
Category
<ul class="child">
<li>
Sub-category
<ul class="grandchild">
<li>
Sub-sub-category
<ul class="great-grandchild">
<li>
sub-sub-sub category
</li>
</ul>
</li>
</ul>
</li>
<li>
Sub-category 2
</li>
</ul>
</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
then you would hide all of the children/grandchildren etc with css, and show them on parent:hover/active
ul:not('.parent') {
display: none;
}
ul.parent > li:hover > ul,
ul.child > li:hover > ul,
ul.grandchild > li:hover > ul,
ul.great-grandchild > li:hover > ul {
display: block;
}
I have a menu with list items Home and Home 2. When I hover my mouse over "Home"/"Home 2", the dropdown list appears for the item as expected. However, when I am moving my mouse down to the dropdown list, the list disappears immediately and I cant get access to the dropdown menu.
I want the drop down list to be visible while moving my mouse down to the dropdown list preferably using jQuery. However, I cant get it to work.
The HTML Layout for the design is:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<div class="dropDownClass"">
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</div>
</li> </ul>
Any help will be much appreciated.
Thanks
I would do something like this.
HTML:
<ul class="mega">
<li class="grid">Home
<ul>
<li>DD Item 1</li>
<li>DD Item 2</li>
<li>DD Item 3</li>
</ul>
</li>
<li class="grid">Home2
<ul>
<li>DD Item 4</li>
<li>DD Item 5</li>
<li>DD Item 6</li>
</ul>
</li>
CSS:
ul{
list-style-type: none;
}
.mega{
width: 200px;
}
.grid{
padding: 10px 15px;
background-color:gray;
color: white;
border: 1px solid black;
}
.grid ul{
display: none;
}
.grid:hover > ul{
display: inline;
}
Check out this fiddle to see it in action.
You need to setup your CSS to resemble this:
ul{list-style: none; padding: 3px; margin:0}
li ul{display:none;}
li.grid:hover ul{display:block}
This will hide the second ul until the li is hovered.
Add this in your document.ready function:
$('.grid1 ul').hide();
$('.grid2 ul').hide();
$('.grid1').on('mouseover', function() {
$('.grid1 ul').show();
$('.grid1').on('mouseout', function() {
$('.grid1 ul').hide();
});
});
$('.grid2').on('mouseover', function() {
$('.grid2 ul').show();
$('.grid2').on('mouseout', function() {
$('.grid2 ul').hide();
});
});
and change the value of the class attributes of the two <li> elements from both being grid to one of them being grid1 and the other being grid2.
Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child,
So if i select a group all the parent & child in the group should have be moved with the group,So help me....
Here is my example code
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var me = jQuery || $.noConflict();
me(document).ready(function() {
if((me('ul li ul li ul li').children().length) == 0 ) {
me('ul li ul li ul li').addClass("list");
}
me('ul li ul li').click(function() {
me('ul li ul li').removeClass("list_state");
if((me(this).children().length) > 0 ) {
me(this).addClass("list_state");
me('.list_state').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
}
});
me('li.list').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
});
</script>
<ul>
<li id="level-0">India
<ul>
<li id="level-0-3">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1">United Kingdom
<ul>
<li id="london">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option
I have attached an example screenshot below..
Check this fiddle
In the above fiddle only the text within clicked li and its successor li's will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par" to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}
I have a very simple example of a menu here:
<ul id="1">
<li>First</li>
<li>Second
<ul id="2">
<li>Second - 1</li>
<li>Second - 2</li>
<li>Second - 3
<ul id="3">
<li>Aaa</li>
<li>Bbb</li>
<li>Ccc</li>
</ul>
</li>
</ul>
</li>
<li>Third</li>
</ul>
I need to get the <li> that has a child <ul> and that is a child of <ul> who is a child of <li>, and apply a style to it.
I know it sounds complicated, but in the example above I want to get only the <li> that says "Second - 3" which is inside a ul, which is a child of a li and has a child ul. I don't want to get any other <li>s.
I can't do this without getting also the li which says "Second", and I don't want that.
$("li > ul").addClass('whatever');
Use $("li ul li:has(ul)")
e.g:
$(function(){
var items = $("li ul li:has(ul)");
alert(items.html());
});
Working example: http://jsfiddle.net/EXzaa/
Try this:
$("li > ul > li").each(function(){
if ( $(this).find("ul").length > 0){
$(this).css({"font-weight":"bold"});
}
});
Unless I get you wrong this is simple. Try something like this:
$('#3').parent('li').addClass('whatever');
This will select the parent node of the ul element with the id = 3 (only if it is an li element)