So, guys, basically what I need to find:
----> All <li> which has <ul> without ANY class.
In this example I would ONLY want the <li> parent of the commented <ul>:
HTML
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li> <!--------- Just Need This One ---------->
<a>Item 2</a>
<ul>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I'm aware of .not("[class]"), and so I tried something like:
$('#myList li').has('ul').not("[class]")
which obviously doesn't work because jQuery is looking for <li>'s which have a nested <ul> but doesn't have any class.
So, guys, can anyone please help? :)
Instead of using
$('#myList li').has('ul').not("[class]")
you can use
$('#myList > li').has('ul:not([class])')
you can also use this selector
$('#myList > li:has(ul:not([class]))')
$('#myList > li:has(ul:not([class]))').css('background' , 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Use filter() over li and then check for children ul without any class with .length,
$('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
//or $('> ul:not([class])',this) in case of direct <ul>
});
var $li = $('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
});
console.log($li)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Try $('#myList li ul').filter(':not([class])'):
console.log($('#myList li ul').filter(':not([class])').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I really hate that 'too short to be an answer' ....
$('#myList li > ul:not([class])')
Seems to be the simplest one that does the job ?
Related
I need to .Clone each a to inside the next elment which is ul
How can i do that ?
<ul>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
</ul>
I have tried:
$("a").each(function () {
$(this).clone().insertAfter(this).find('ul');
});
The problem is i get the new cloned elment just beside the original one, i wish to insert it inside the next ul elment
thanks
You need to find the next list, then append the cloned element. I also fixed your invalid HTML:
$("a").each(function() {
$(this).next("ul").append($(this).clone(true));
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<ul>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
</ul>
Valid HTML requires that <ul> can only have <li> as a direct descendant (child). A <li> can have anything within itself, but it needs to end properly with a </li>. The demo follows the following pattern:
<ul><!------------------------------Main List-->
<li><!----------------------------List Item-->
<a href='#/'>LINK 1</a><!---Original Link-->
<ul><!------------------------Target List-->
<li><!--------------------New List Item-->
<a href='#/'>LINK 1</a><!--Clone Link-->
</li>
</ul>
</li>
...
</ul>
Demo
/*
.each() <a>
Create a .clone() of current <a>
Find .next() <ul>
.append() the clone to <ul>
.wrapInner() of <ul> with a <li>
*/
$("a").each(function() {
var dupe = $(this).clone(true, true);
$(this).next('ul').append(dupe).wrapInner(`<li></li>`);
});
<ul>
<li>
<a href='#/'>LINK 1</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 2</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 3</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 4</a>
<ul></ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm trying to expand my filtering function for li elements in ul.
My ul structure looks like this:
<ul>
<li class="root"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Currently I have filter function that filters based on query among .list elements. Now I'm trying to implement it in a way, that while filtering list (still only .list elements), there would be structure history.
For example: searching for "li2.3.2" would return:
<ul>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
EDIT: For clarification and since I failed to mention that in original post...I'm trying to filter by users input (partial matching counts).
My current method works by taking users input in text input box, taking all .list elements in ul and comparing for each element if span.text contains searching text.
you should give class every floor,and use CSS filter :parent and :nth-chiled find what you want
#pc9529, yes it is possible. but here you want o display only parent li node html. So give different class to the li which is belonging from your parent UL. Look at the given solution,
$(document).ready(function(){
$("li").click(function(e){
e.stopPropagation();
if($(this).hasClass("root1"))
{
alert($('<div>').append($(this).clone()).html());
}
else{
alert($('<div>').append($(this).closest(".root1").clone()).html());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="root1"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="fa fa-chevron-down"></span><i class="fa root-checkbox fa-square-o"></i><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root1"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Please have a look at this JSFiddle
The JQuery finds your item by text, then find all parents that contain the ".root" class, and finally gets the last parent i.e. the root ul element of the hierarchy.
$('.list:contains("li2.3.2")').parents('.root').last().html()
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
is there any easy way to add Li from jquery in below structure
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
i want to add below li after FAQ
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
I have tried below but it is addind in all li's
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().html('<li> Menu 5 </li>');
Use after() to insert after an element
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
or you can use append() for appending content
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
Use the After() method of JQuery:
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
Here is Fiddle for that.
I have a menu:
<ul>
<li class="menu-item">
about
</li>
<li class="menu-item">
contact
</li>
</ul>
How can I add the target="_parent" to all links with the class "menu-item". How can I do this with jquery
This will do it:
$('.menu-item').attr('target', '_parent');
as you commented, if the menu-item class is attached to li elements then do;
$('.menu-item > a').attr('target', '_parent');
Or as an addition to the answer from keune for modern jQuery:
$(document).ready(function () {
$('li.menu-item').prop('target', '_parent');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item"> about
</li>
<li class="menu-item"> contact
</li>
</ul>