I created a list (li) and I want to add a specific class to that list
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext"></span>
</li>
</ul>
<li>
</ul>
I want to add a class to only that first ul > second li > first span class but for some reasons it is also adding it to that span class under the second ul.
This is the code I'm using to add the class
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
Snippet:
$('ul.main li:nth-child(2) .ext').addClass('another-ext')
.another-ext {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li></li>
<li>
<span class="ext"></span>
<ul>
<li>
<span class="ext">hello</span>
</li>
</ul>
<li>
</ul>
Use children selector. It should work.
$('ul.main > li:nth-child(2) > .ext').addClass('another-ext')
.another-ext {color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>A</li>
<li>
<span class="ext">B</span>
<ul>
<li>
<span class="ext">C</span>
</li>
</ul>
<li>D
</ul>
Related
I created some classes for the menu items, so I can call upon them.
.dropdownBox {
display: none;
}
.dropdown li:hover > ul.dropdownBox {
display: block;
}
However, the roll over state for 'Work' that has the class .dropdown is now showing the submenu items that has the class .dropdownBox
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I'm trying to use the class .dropdown so when you roll over it, it shows the class .dropdownBox But I cant seem to get the right selector working.
just update your CSS. Hope this will work for you.
.dropdownBox {
display: none;
}
.dropdown:hover + .dropdownBox {
display: block;
}
.dropdownBox:hover {
display: block;
}
<nav class="screen2_menu_container">
<label for="screen2_menu_check" class="screen2_menu_btn">
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="screen2_menu_check" class="screen2_input" />
<!-- the hamburger menu -->
<div class="screen2_menu_hamburger"></div>
<!-- menu items -->
<ul class="screen2_menu_items navPositionRight" id="screen2_menu_items">
<span>> CONTACT</span>
</ul>
<ul
id="screen2_menu_items_Nav"
class="screen2_menu_items navPositionLeft"
>
<li>
<span>> HOME</span>
</li>
<li class="dropdown">
<span>> WORK</span>
</li>
<ul class="dropdownBox">
<li>
<span>WORK-1</span>
</li>
<li>
<span>WORK-2</span>
</li>
<li>
<span>WORK-3</span>
</li>
</ul>
<li>
<span>> REEL</span>
</li>
<li class="hideDiv">
<span>> CONTACT</span>
</li>
</ul>
</label>
</nav>
I have a menu and the link or "a href click" is not working.
jQuery does not give any errors that I am aware of, and the menu opens as desired, but nothing seems to take the user to stackoverflow.com for the link in my code below. I tried .parent a, but maybe this is not correct.
I made this example based on the example below which is slightly different from the code I posted below.
jsfiddle
$(function () {
$(".submenu").hide();
$(".parent a").click(function (e) {
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});
.year_2014 .monthly-archive {
display: none;
}
.january .archive {
display: none;
}
.february .archive {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="menu">
<ul>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
</ul>
</li>
</ul>
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Click
</li>
</ul>
</li>
</ul>
</div>
If I using $(".parent > a").click(function (e) can click a link and redirect to link
$(function () {
$(".submenu").hide();
$(".parent > a").click(function (e) {
var elems = $(this).closest('li');
elems.siblings('li').find('ul').hide();
if (elems.find('.submenu').length) {
$(".submenu:first", elems).toggle();
}
return false;
});
});
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="menu">
<ul>
<li class="parent">Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Hello
</li>
</ul>
</li>
</ul>
</li>
<li class="parent"> Hello
<ul class="submenu">
<li> Hello
</li>
<li> Click
</li>
</ul>
</li>
</ul>
</div>
I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
I want to select with css the last of child <li> that text appear gg
I want only select Last gg <li> Please Help
ul {
margin: 0;
padding: 0;
}
.container ul li + li:nth-last-child(1) li:last-child {
border: 1px solid red
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li>
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Try this
ul { margin:0; padding:0;}
.gg{
color:red;
}
<div class="container">
<ul class="ng-scope">
<li>
<ul>
<li>a</li>
</ul>
</li>
<li>
aa
<ul>
<li>
bb
<ul>
<li>
cc
<ul>
<li>
dd
<ul>
<li>
ee
<ul>
<li>
ff
<ul>
<li class="gg">
gg
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
How can I select only the first parents ul (here with the class selectMe), with or without a <div> between the <nav> and them ?
I need to do it without any class in the ul.
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
.
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
How about using a different selectors for every case, and combining the both?
Case 1: Select only the first parents <ul> without <div>:
nav > ul
Note that > mean the child in the immidiate next level below.
Case 2: Select only the first parents <ul> with <div>:
nav > div > ul
Combining both cases: You can use both of these combined by adding a ,:
nav > ul, nav > div > ul
Without the class you'll need two selectors:
nav > ul,
nav > div > ul {
...
}
> here is the Child Combinator selector, which selects the direct children. This means the inner ul contained within your top-level ul will not get selected.
Example 1 (nav only)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
Example 2 (nav and div)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
In fact I have to select all the ul in top level and not ul in ul
This is exactly what this does. In both of the above examples only the outer ul element has a border:
If both ul elements were selected, both would have the border and it would instead look like this: