I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below the menu goes three levels deep.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
<ul id="thirdLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>
Most menus will be generated as above, but also the one below (without the third level) is an option.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
</li>
</ul>
</li>
<ul>
</li>
</ul>
What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.
I've made a jsFiddle for you: http://jsfiddle.net/danAR/
jQuery code:
$(function() {
$('ul#secondLevel li').each( function(index, item) {
$(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
});
});
CSS:
a.aBold {
font-weight:bold;
}
I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:
var $third = $('#thirdLevel');
if ($third.length)
{
$third.closest('a').css('font-weight', 'bold');
}
Related
I want to delete text "previous" inside li in wordpress theme.
the text to delete
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
I tried with jquery like this :
var $ = jQuery;
$('li.flex-nav-prev').html('');
$('li.flex-nav-prev').html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
It's works in snippet but it doesn't work on website.
Thank you so much
To delete just the text of an element try this jquery code:
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();
Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>
I've read at least, ten different similar topics but haven't been able to figure out, what the problem is.
I am trying to change, part the url's in my header menu. Those url's, which contains "onepage" should be replaced with a hashtag.
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
$('$('a[href*="onepage"]')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage","g"), "#");
});
JSFiddle
$('$('a[href *= "onepage"] ')').each(function() {
var text = $(this).text();
$(this).text(text.replace(new RegExp("onepage", "g"), "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
You should change the href instead of the text. Also, you have your css selector wrong.
$('a[href*="onepage"]').each(function() {
var href = $(this).prop("href");
// change the property href to new url
$(this).prop("href", href.replace(new RegExp("onepage", "g"), "#"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
You could use plain javascript to change the href property, see following please:
$('a[href*="onepage"]').each(function() {
this.href = this.href.replace(/onepage/, "#");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-32gb"><span>iPhone 32GB</span></a>
</li>
<li class="menu-item">
<a class="level2" href="//test.com/products/iphone/iphone-onepage-64gb"><span>iPhone 64GB</span></a>
</li>
</ul>
$('a[href*="onepage"]').each(function() {
var str = $(this).attr('href').replace(/onepage/, "#");
$(this).attr('href',str);
});
or
$('a[href*="onepage"]').attr( "href", function( i, val ) {
return val.replace(/onepage/, "#");
});
I have a menu structure like this:
<ul>
<li>
<h3>pageA</h3>
<ul>
<li id="a1">1
</li>
<li id="a2">2
</li>
<li id="a3">3
</li>
<li id="a4">4
</li>
<li id="a5">5
</li>
</ul>
</li>
<li>
<h3>pageB</h3>
<ul>
<li id="b1">1
</li>
<li id="b2">2
</li>
<li id="b3">3
</li>
<li id="b4">4
</li>
<li id="b5">5
</li>
</ul>
</li>
</ul>
And I want to change<li> classes with javascript. I can change child <li> with following code. But i can't change class of parent <li>.
document.getElementById("a1").className = 'active';
Your solution should work to replace the class of an element with that ID.
Check out this page:
http://www.w3schools.com/jsref/prop_html_classname.asp
Example
Overwriting an existing class name with a new one:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName";
Example
To add a class to an element, without overwriting existing values, insert a space and the new class name:
document.getElementById("myDIV").className += " anotherClass";
When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}
Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)
This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.