i´ve got a 3 lvl navigation and i want that every "ul" with the class "levle2" get an additional class called "count" with a counter that counts the "ul´s" and puts the number behind the class.
This is how it should look like
<ul class="level1" >
<li>
More options
<ul class="level2 count1">
<li>Second level link</li>
<li>Second level link</li>
</ul>
</li>
<li>
More options2
<ul class="level2 count2">
<li>Second level link2</li>
<li>Second level link2</li>
</ul>
</li>
<li>
More options3
<ul class="level2 count3">
<li>Second level link3</li>
<li>Second level link3</li>
</ul>
</li>
</ul>
JS Code
if($('ul.level1 li').find('ul').children('ul.level3').length > 0)
{
var item = $('ul.level1 li').find('ul').children('ul.level3');
item.parent().addClass('count');
} else{
}
http://jsfiddle.net/HvPtW/9/
Try this code:
$('ul.level2').each(function(i){
$(this).addClass('count'+i.toString());
});
For select every object with a specifique className and add to each object wich contains className look at your console:
var allElmtsClassName = $(".className");
allElmtsClassName.each(function(index)
{
console.log(index);
$(this).addCLass("anotherCLass");
});
Related
I'm iterating over list items in a for loop, so I only have one li I can apply styles to, so the peer class won't work in this case.
In CSS I can do this
li + li {
margin-top: 20px;
}
How can I achieve this same effect in tailwind?
You can do this with the child selector. Giving the parent div the class [&>li:nth-child(n+2)]:mt-10 will fix the problem. You can check it out in the demo below.
Demo
You can style the first child with first modifier of the tailwind css. Following below is the example
<script src="https://cdn.tailwindcss.com"></script>
<div class="list-disc text-green-700 p-8 space-y-4">
<li class="first:text-blue-700">ListItem 1</li>
<li class="first:text-blue-700">ListItem 2</li>
<li class="first:text-blue-700">ListItem 3</li>
<li class="first:text-blue-700">ListItem 4</li>
<li class="first:text-blue-700">ListItem 5</li>
<li class="first:text-blue-700">ListItem 6</li>
<li class="first:text-blue-700">ListItem 7</li>
<li class="first:text-blue-700">ListItem 8</li>
</div>
You can also view the demo here
Found a solution:
Use the space selector - space-y-* on the parent. It acts like > * + * in normal css.
Example:
<ul class='space-y-5'>
<li>my list item</li>
<li>my list item</li>
<li>my list item</li>
</ul>
This will apply a margin top to every li except the first one.
I have a User menu dropdown:
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
#using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
<li> Logout</li>
}
</ul>
Adding the #Html.BeginForm breaks the style of my dropdown.
Any clue on how can I avoid that for adding extra styling to my dropdown element?
Because you are putting a form that breaks your list layout, put the form inside the <li></li>
a list have to have layout
<ul>
<li></li>
</ul>
#html.beginform does actually render a form so your html will look like
<ul>
<li></li>
<form>
<li></li>
</form>
</ul>
so change to this
<ul class="dropdown-menu">
<li> Profile</li>
<li><span class="badge badge-success pull-right">5</span> Settings </li>
<li> Lock screen</li>
<li class="divider"></li>
<li> #using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
Logout
}
</li>
</ul>
I have a navigation bar with drop down menus created with UL elements. Currently, the drop down table shifts when the web page is zoomed in or out. How do I style the CSS so that the drop down menus will stay aligned?
<ul id="links">
<li>First link</li>
<li>Second link
<ul id="dropdown1">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
<li>Third link</li>
<li>Fourth link
<ul id="dropdown2">
<li>Drop down item 1</li>
<li>Drop down item 1</li>
<li>Drop down item 1</li>
</ul>
</li>
</ul>
jsFiddle here.
I'm trying to create a top menu with a dropdown submenu function.
I want to target the list items witch have a submenu (child element) attached to it. So that i can style them with a different color list style etc.
HTML:
<nav>
<ul><div id="logo">
<img src="images/design/logo.png" alt="Logo for responsive template" />
</div>
<li>Home</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
</ul>
</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
So each Parrent link get another style than the rest.
You can do it with JQuery: example
$(function(){
$('li').each(function(){
var parent = $(this).parent().parent();
if(parent.is('li')){
parent.addClass("colored");
}
})
});
This solution assumes that your HTML is valid and you use <ul> and <li> correctly.
You can't select an element based in descendent elements. Then you can't have a selector like this:
select all <li> tags that contain an <ul> tag
In the other way you can
select all <ul> tags inside a <li> tag
The best you can do is assign a class:
<li>Child Link</li>
<li>Child Link</li>
<li class="sub">Parrent Link
<ul>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
<li>Child Link</li>
</ul>
</li>
I Would change the ul.class every time i make a new list.
so that, if the ul li has children, it will change automatically, if i want to have children there.
You just have to use CSS selectors as follows:
ul > li > li {
// your css code here
}
You havethe official documentation in the W3C site.
No need tu use id's or class tags
I am trying to convert HTML to Wordpress and I am having troubles with menus.
The menu is a 3 level drop-down menu, I am outputting it with wp_nav_menu and this is how it formats.
<ul id="nav" class="sf-menu">
<li>Home</li>
<li>Blog</li>
<ul class="sub-menu">
<li>Level 2</li>
<ul class="sub-menu">
<li>Level 3</li>
</ul>
</ul>
<li>Portfolio</li>
<li>Contacts</li>
</ul>
Basically I want to remove the "sub-menu" class from the /s in the 2nd level and 3rd level.
This is how I want it to be:
<ul id="nav" class="sf-menu">
<li>Home</li>
<li>Blog</li>
<ul>
<li>Level 2</li>
<ul>
<li>Level 3</li>
</ul>
</ul>
<li>Portfolio</li>
<li>Contacts</li>
</ul>
Is this possible to do with a custom walker class?
There is a wordpress 'setting' fkr that:
As you can see:Function Reference/wp nav menu
you can remove the ul by writing this when you call the wp_nav_menu:
<?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
this should work. you also have some other Parameters for the nav menu: it's id, container_class and more.
you can use below code :
$(function() {
$('.sf-menu ul').removeClass('sub-menu');
});