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/
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 have bootstrap 3 menu. And I want to add class to "dropdown" menu if usre click on "caret" ( parent menu item )
<ul id="menu-testing-menu" class="nav navbar-nav sf-js-enabled" style="touch-action: pan-y;">
<li class="menu-item menu-item-has-children dropdown">
<a class="sf-with-ul" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu" style="display: none;">
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
<li class="menu-item">
Lorem Ipdum
</li>
</ul>
</li>
</ul>
So I try to use js
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).find('.dropdown-menu').toggleClass('dd-menu-show');
});
but it doesn't work. How to solve thise problem?
$(this).find('.dropdown-menu') is not possible when clicking .caret because $(this) is looking inside the current element and it is empty.
You might also want to consider adding the click event to the entire <a>.
Try this
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
var parent = $(this).closest('.dropdown');
parent.find('.dropdown-menu').toggleClass('dd-menu-show');
});
.find() searches for a node inside the selected node. You are selecting the .caret span element, so it's trying to find a .dropdown-menu node inside that, which of course does not exist. You'll want to navigate up the tree to the .dropdown node, and then do your find() call.
$(this).find(".dropdown-menu") will not work because there is no element in the current clicked element with class dropdown-menu.
So just try :
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$('.dropdown-menu').toggleClass('dd-menu-show');
});
You can do it in this way.
$('#menu-testing-menu li a .caret').click(function(e){
e.preventDefault();
$(this).parent().next('.dropdown-menu').toggleClass('dd-menu-show');
});
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.
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.