Take the following code:
<ul class="menu">
<li class="section">
<span class="show">ABC</span>
<ul class="items"><li>UL selected</li></ul>
</li>
<li class="section">
<span class="">DEF</span>
<ul class="items"><li>UL not selected</li></ul>
</li>
</ul>
I need to select each ul.items inside a li.section which has a span with class "show". In this example, only the first ul.items should be selected.
What jquery selector do I need?
This could do the trick (http://jsfiddle.net/bmqyF/1/):
$("ul li.section:has(span.show) ul.items li");
$('li.section:has(span.show) ul.items')
Finds the li.section's that have span.show and selects the ul.items within it.
Related
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
I want to show only active li tags ,while other li tags will be hide.
Excepted Output will be
Type
I try javascript
$( document ).ready(function() {
$('#shop li.active').show();
});
But nothing will happen..
Using jQuery, you need to hide which are not active
$(document).ready(function() {
$('#shop li:not(.active)').hide();
$('#shop li.active').show();
});
Can be done using CSS as well
#shop li:not(.active){
display: none;
}
I want to show only active li tags ,while other li tags will be hide.
Hide the siblings
$('#shop li.active').show().siblings().hide();
Demo
$(document).ready(function() {
$('#shop li.active').show().siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
But nothing will happen..
Since there was no logic for hiding the li's, only showing them. As shown above, you need to show the active ones and hide rest of them.
You have to add a little bit of css which will hide li tags by default
ul li{
display:none
}
https://jsfiddle.net/jzj6o5ms/1/
You can use .not & hide
$(document).ready(function() {
$('li').not('.active').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});
I have a menu with their submenus too. After the page loads.. The website generates random texts after every end of submenus..
This is the current markup that is generated from firebug:
<nav class="shopMenuHover">
<div id="bx_incl_area_5_1">
<ul>
<li><a href="#" >First Menu</a>
<div class="" style=""><h2>First Sub Menu</h2>
<ul>
<li>
Sub Menu > Sub Menu
</li>
<li>Sub Menu > Sub Menu 90797</li>
</ul>
</div>
</li>
<li class="firstLevel hasSubmenu instrumentarium-en-fresen">
Second Menu
<div><h2><a href="">Second Menu</h2>
<ul>
<li><font><font>Sub Menu > Sub Menu</li>
<li>Sub Menu > Sub Menu 896346</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
Problem: The texts 90797 and 896346 are texts generated randomly by the website. How can I remove these texts after every last li > a inside every ul?
This is the current jquery i used to select only the text inside a tag:
<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>
Output: Remove all texts after a tag of every last li-last-child..
Please Help Me...
You can select all the nodes, including the textnodes, with contents(), then use filter() to get just the textnodes outside the anchors, and remove them
$(".shopMenuHover ul li:last-child").contents().filter(function() {
return this.nodeType === 3;
}).remove();
FIDDLE
Here is a way to do this with CSS using the visibility property :
DEMO
.shopMenuHover ul li:last-child{
visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
visibility:visible;
}
note : use the * selector so it works even if the <li> contains something else than a link.
Another option would be to set the html of the li to just the a.
$(".shopMenuHover ul li:last-child").each(function(){
var $this = $(this);
$this.html($this.children("a"));
});
http://jsfiddle.net/ujrp151h/1/
This would also clear anything else within the element other than the a, not just text nodes.
I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>
just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too
I'm working with WordPress and 2 different plugins (Icons per post & pages and Multi-Level navigation). With the first plugin I selected a Icon per a page and with the second I built a dropdown menu.
The thing is that I want to show only the page Icon but the plugin remains writing the page title. I want to delete it with jQuery.
This is the generated HTML for the menu:
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-514">
<a href="http://www.pausoberriak.net/lan-emailea/onurak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/beneficios.png" class="page_icon" alt="Onurak">Onurak</a>
</li>
<li class="page_item page-item-179">
<a href="http://www.pausoberriak.net/lan-emailea/lan-emailea-formulak/?lang=eu">
<img src="http://www.pausoberriak.net/wp-content/uploads/icons/formulas.png" class="page_icon" alt="Formulak">Formulak</a>
<ul class="children" style="display: none; visibility: hidden; ">
<li class="page_item page-item-183">
Praktikak enpresetan
</li>
<li class="page_item page-item-186">
Zerbitzu Okupazionala
</li>
<li class="page_item page-item-195">
Kontratazioa
</li>
</ul>
</li>
</ul>
I used this code to delete the text, in that case it should delete "Onurak", "Formulak", "Praktikak enpresetan", "Zerbitzu okupazionala" and "kontratazioa" :
<script type="text/javascript">
jQuery('#suckerfishnav li li a').text("");
</script>
It works, but it also deletes the img tag and children ul. I only want to remove the link text and have the other stuff remain.
Thanks in advance
First, block level elements are not valid inside a elements, i.e. you cannot put the ul element inside a.
You can iterate over all children and only remove text nodes:
jQuery('#suckerfishnav li li a').contents().each(function() {
if(this.nodeType === 3) {
this.parentNode.removeChild(this);
}
});
or
jQuery('#suckerfishnav li li a').contents().filter(function() {
return this.nodeType === 3;
}).remove()
Reference: .contents, Node
I'd start by trying to use jQuery's child selector instead of the "#suckerfishnav li li a" that you've used.
Something like jQuery('#suckerfishnav > li > li > a') might help.
http://api.jquery.com/child-selector/