Append div 10 times each time button clicked using javascript - javascript

This is my code:
$(document).ready(function () {
$('<button class="btn more">View More</button>')
.appendTo(".listing-item-container")
.click(function() {
$(this).closest(".listing-item-container").removeClass("collapsed");
});
$('<button class="btn less">View Less</button>')
.appendTo(".listing-item-container")
.click(function() {
$(this).closest(".listing-item-container").addClass("collapsed");
});
});
.listing-item-container.collapsed > :nth-of-type(n+3) {
display:none;
}
.listing-item-container > .more {
display:none;
}
.listing-item-container > .less {
display:block;
}
.listing-item-container.collapsed > .more {
display:block;
}
.listing-item-container.collapsed > .less {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing-item-container collapsed">
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div><div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>
In above code when I click view more, it will display all remaining 'listing item' div and when I click view less, all divs are collapsed and display only 2 divs.
My expected output is, when I click view more it should only display next 2 'listing item' div and view more button. Again If I click view more, it should display next 2 'listing item' div and view more button. This should continue for all 100 more 'listing item' div. In the end it should display view less button. When I click view less button, each time it should collapse last 2 'listing item' div.
How can I modify my code to get the expected output?


The key here is in the use of jquery slice() (same as javascript slice() but on a jquery collection).
var howManyItemsToShow = 2;
$(".listing-item").hide().slice(howManyItemsToShow).show();
this will hide all the items, then show the first 2. The UI update will be combined into a single action. If you add animation (.slideDown / .fadeIn) then this will need to be different.
You then add your "pagesize" (2 in the example) each time you click; and update.
Add a check for start/end and utilising the css trick to show/hide the more/less buttons gives you:
var lines = 2;
var pagesize = 2;
// assuming they don't change, load them up-front for small efficiency gain (and DRY)
var items = $(".listing-item-container .listing-item");
$(document).ready(function() {
$('<button class="btn more">View More</button>')
.appendTo(".listing-item-container")
.click(function() {
lines += pagesize;
items
.show()
.slice(lines).hide();
if (lines >= items.length)
$(this).closest(".listing-item-container").removeClass("collapsed");
});
$('<button class="btn less">View Less</button>')
.appendTo(".listing-item-container")
.click(function() {
// same for "less" but -= and different check
// this can of course be combined with the "more" button (DRY)
// shown separately for clarity
lines -= pagesize;
items.show();
items.slice(lines).hide();
if (lines <= pagesize)
$(this).closest(".listing-item-container").addClass("collapsed");
});
});
.listing-item-container.collapsed> :nth-of-type(n+3) {
display: none;
}
.listing-item-container>.more {
display: none;
}
.listing-item-container>.less {
display: block;
}
.listing-item-container.collapsed>.more {
display: block;
}
.listing-item-container.collapsed>.less {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing-item-container collapsed">
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>


I will do that this way...
((parentRef='.listing-item-container', ItemsRef='.listing-item', startView=2, addView=2 )=>
{
const
listItems = document.querySelectorAll(ItemsRef)
, btMoreLess = document.querySelector(parentRef).appendChild( document.createElement('button'))
;
btMoreLess.className = 'showMore'
var listItemsViewCount = startView -addView;
btMoreLess.onclick =_=>
{
listItemsViewCount += btMoreLess.classList.contains('Less') ? -addView : +addView
listItems.forEach( (item,i)=> item.classList.toggle('noDisplay',i>=listItemsViewCount) )
if (listItemsViewCount >= listItems.length) btMoreLess.classList.add('Less')
else if (listItemsViewCount === startView) btMoreLess.classList.remove('Less')
}
btMoreLess.click() // init
}
)() // IIFE ending
.noDisplay{ display:none; }
button.showMore:before { content : 'View More'; }
button.showMore.Less:before { content : 'View Less'; }
.listing-item-container { counter-reset: itemCounter; }
.listing-item { counter-increment: itemCounter; }
.listing-item > p::before { content: counter(itemCounter) '.'; }
<div class="listing-item-container">
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>

Related

How to use javascript to detect when the mouse scrolls to the bottom will trigger an event?

I am new to javascript, and I have encountered difficulties and hope to get your help!
My English is not good, but I try to describe my problem completely!
I hope the load() function can be triggered when the mouse scrolls to the bottom , How can the load() event be triggered when the mouse scrolls to the bottom?
Thank you for your help~
function show(){
let scrollposition = 0;
const el = document.querySelector('.demo');
el.addEventListener('scroll',function(e){
console.log('123');
load();
// let a = el.target.scrollTop;
// let b = el.target.innerHeight;
// let c = el.target.scrollHeight;
// if(currentscrollposition + windows >= total){
// console.log('bottom');
// }
})
}
show();
function load(){
let el = document.querySelector('.load');
el.style.display = 'block';
}
// // load()
.demo{
width: 200px;
height: 300px;
overflow-y:scroll;
background-color: #fff;
}
.item{
list-style:none;
padding:20px;
border:1px solid #ccc;
}
.load{
width:100%;
margin: 0 auto;
display: none;
}
<ul class="demo">
<li class="item">article1</li>
<li class="item">article2</li>
<li class="item">article3</li>
<li class="item">article4</li>
<li class="item">article5</li>
<li class="item">article6</li>
<li class="item">article7</li>
<li class="item">article8</li>
<li class="item">article9</li>
<li class="item">article10</li>
<!-- load -->
<svg class="load" version="1.1" id="loader-1" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</ul>

I hope it helps you:
var currPos = window.scrollY;
document.addEventListener('scroll', () => {
if (window.scrollY < currPos) {
//scroll up
console.log('Scroll Up');
} else {
//scroll down
console.log('Scroll Down');
}
currPos = window.scrollY;
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>Header</header>
<main>
<ol>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ol>
</main>
<footer>Footer</footer>
</body>
</html>

If you want to call a function when scroll get the bottom of the list you should get the position of the last child and scroll position and when scroll reach the last child then call the function.
function show() {
let scrollposition = 0;
const ul = document.querySelector('.demo');
ul.addEventListener('scroll', function(e) {
var li = ul.children[ul.children.length - 2];
if (ul.scrollTop + ul.offsetHeight > li.offsetTop) {
document.getElementById('loading').innerHTML = "loading...";
load();
}
else{
document.getElementById('loading').innerHTML = "";
}
})
}
show();
function load() {
let el = document.querySelector('.load');
el.style.display = 'block';
}
// // load()
#loading {
width: 100px;
float: right;
}
.demo {
width: 200px;
height: 300px;
overflow-y: scroll;
background-color: #fff;
}
.item {
list-style: none;
padding: 20px;
border: 1px solid #ccc;
}
.load {
width: 100%;
margin: 0 auto;
display: none;
}
<div id="loading">
</div>
<ul id="demo" class="demo">
<li class="item">article1</li>
<li class="item">article2</li>
<li class="item">article3</li>
<li class="item">article4</li>
<li class="item">article5</li>
<li class="item">article6</li>
<li class="item">article7</li>
<li class="item">article8</li>
<li class="item">article9</li>
<li class="item">article10</li>
<!-- load -->
<svg class="load" version="1.1" id="loader-1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</ul>

Superfish sf-js-enabled seems to be not working

I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><div>Project's Stories</div></li>
<li><div>Menus</div></li>
<li><div>Promotions</div></li>
<li><div>Celebration Tips</div></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<div>FAQ</div>
</li>
<li>
<div>Feedback</div>
</li>
<li>
<div>Contact Us</div>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.

Here is an working sample example
Your code need some css changes too so i referred some basic example from
here
Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current">menu item
<ul style="display: none;">
<li>menu item</li>
<li class="current">menu item
<ul style="display: none;">
<li class="current">menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
<li>menu item
<ul style="display: none;">
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>

you need to make sure the document ready is placed after your html body.
if u place in top of body, it wont work because the dom element is not created yet.

Carsouel nothing working and js code has no errors

I am trying to get this carousel working using jQuery strict mode, when clicking on the prev and next button nothing is responding and weird part is there is no errors in the console. Am i missing something from the code.
html:
<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Micah FED Conclusive Exercise</title>
<link rel="stylesheet" type="text/css" href="inc/css/reset.css" />
<link rel="stylesheet" type="text/css" href="inc/css/base.css" />
<script src="inc/js/vendor/jquery.min.js"></script>
<script src="inc/js/base.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<h2 class="logo">LOGO</h2>
</header>
<div class="page-content">
<section class="main-carousel">
<div class="carousel-next">></div>
<div class="carousel-prev"><</div>
<div class="carousel-cells">
<article>
<div class="slide-text">
<h1>Slide One</h1>
<p>A slide about sliding slides.</p>
</div>
</article>
<article>
<div class="slide-text">
<h1>Slide Two</h1>
<p>A slide-sliding slider sliding slides.</p>
</div>
</article>
<article>
<div class="slide-text">
<h1>Slide Three</h1>
<p>A slide-sliding slider sliding slides.</p>
</div>
</article>
</div>
</section>
<section class="column-content">
<h1>Three Columns</h1>
<div class="three-columns">
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
</div>
</section>
</div>
</body>
Here is the jQuery bit instead i have to do this using strict mode. Which i find difficult
jQuery:
(function() {
var Carousel = {
props:{
current_slide:1,
total_slides:3
},
init:function(){
Carousel.next();
Carousel.previous();
},
bindEvents:function(){
$(".carousel-next").on("click",function(){
alert('next');
Carousel.next();
});
$(".carousel-prev").on("click",function(){
Carousel.previous();
});
},
next:function(){
this.props.current_slide += 1;
},
previous:function(){
this.props.current_slide -= 1;
},
update:function(){
}
}
$(function(){
Carousel.init();
})
})(window);

jQuery tab and shift+tab to show navigation

I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.
Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown( function(e) {
if (e.keyCode == 9 && e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab last");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu"></button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu" style="display: block;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu" style="display: none;">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>

Something like this?
[Has sub-sub-menus and hides siblings when showing current. To not hide siblings, simply remove code after .end() in the li.keydown event]
/* Here i simply assign each event to a variable for easy implimintation. */
var myEvents = {
click: function(e) {
jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
},
keydown: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
}
},
keyup: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
else myEvents.click.apply(this, arguments);
}
}
}
jQuery(document)
.on('click', 'li', myEvents.click)
.on('keydown', 'li', myEvents.keydown)
.on('keyup', 'li', myEvents.keyup)
// this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });
/* Below is simply for making menus with sub menues more noticable */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });
li ul { display: none; }
.highlight > a { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu">Button</button>
<ul class="menu">
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
<li class="has-child">
Menu Item
<ul class="submenu">
<li>Menu Item</li>
</ul>
</li>
</ul>
</nav>

First list item select by jquery

I have a html dropdown menu. I want to select only the parent ul list items by jquery.
my menu code is:
<ul>
<li>list parent</li>
<li>list parent
<ul>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
</ul>
</li>
<li>list parent</li>
<li>list parent</li>
<li>list parent</li>
</ul>
I want to select only list parent to stylize. Not list child

You need to give your root ul a class or id here:
<ul id="rootUL">
Then you can use:
$('ul#rootUL > li').css(...);
The > selector helps you to select li elements which are the direct children of your list with id named rootUL

Add an identifier to the parent ul like an ID then use the child selector to select only its children
<ul id="nav">
<li>list parent</li>
<li>list parent
<ul>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
<li>list child</li>
</ul>
</li>
<li>list parent</li>
<li>list parent</li>
<li>list parent</li>
</ul>
then
$('#nav > li')

The > selector allows you to select only the direct children of your elements.
So, assuming your root ul has a .root class set, you could use this :
$("ul.root > li")

Categories