Develop Reference

Checking multiple divs to see if h3 is present

I am trying to check each instance of .menu-section to see if the .menu-title div contains a h3 title. If it does then it should output the appropriate console.log message. I can't figure out where I am going wrong as logically it seems to make sense to me. Any help would be awesome.
$(".menu-section").each(function() {
if ($('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>
Working CodePen: https://codepen.io/nickelse/pen/zQExRd?editors=1111

The problem is because you're looking at all .menu-title elements in the each() loop, not just the one within the current .menu-section element. You need to use the this keyword to reference the current element, then find() the element you're looking for:
$(".menu-section").each(function() {
if ($(this).find('.menu-title h3').length) {
console.log("menu-title h3 exists");
} else {
console.log("menu-title h3 does not exist");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="nav-wrapper">
<div class="menu-wrapper nav-spacer">
<div class="menu-container content-container">
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PLUS SIZE & CURVE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item">
<h3>PETITE</h3>
</a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
<ul class="menu-section">
<li>
<a class="menu-title menu-item"></a>
</li>
</ul>
</div>
</div>
</section>

Clone each element append next element

I need to .Clone each a to inside the next elment which is ul
How can i do that ?
<ul>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
</ul>
I have tried:
$("a").each(function () {
$(this).clone().insertAfter(this).find('ul');
});
The problem is i get the new cloned elment just beside the original one, i wish to insert it inside the next ul elment
thanks

You need to find the next list, then append the cloned element. I also fixed your invalid HTML:
$("a").each(function() {
$(this).next("ul").append($(this).clone(true));
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<ul>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
</ul>

Valid HTML requires that <ul> can only have <li> as a direct descendant (child). A <li> can have anything within itself, but it needs to end properly with a </li>. The demo follows the following pattern:
<ul><!------------------------------Main List-->
<li><!----------------------------List Item-->
<a href='#/'>LINK 1</a><!---Original Link-->
<ul><!------------------------Target List-->
<li><!--------------------New List Item-->
<a href='#/'>LINK 1</a><!--Clone Link-->
</li>
</ul>
</li>
...
</ul>
Demo
/*
.each() <a>
Create a .clone() of current <a>
Find .next() <ul>
.append() the clone to <ul>
.wrapInner() of <ul> with a <li>
*/
$("a").each(function() {
var dupe = $(this).clone(true, true);
$(this).next('ul').append(dupe).wrapInner(`<li></li>`);
});
<ul>
<li>
<a href='#/'>LINK 1</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 2</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 3</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 4</a>
<ul></ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Toggle list elements in Jquery while showing the first few elements all the time

I have a menu which has categories with subcategories. I want to show/hide the list elements but the catch is I need the first 2 elements to show all the time. I have tried to look for the solution everywhere and the closest I came was jQuery toggle show/hide elements after a certain number of matching elements
but this doesn't seem to be working for me as my filters are little more complicated. Can someone please help me with this. Clicking on 'Sub-Categories' shows/hides links.
Also i must add the default state must be collapsed.
My basic fiddle without any style
HTML code:
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>
jQuery code:
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
});
jQuery('.subCat').click(function () {
jQuery(this).prev('ul:first.level1').slideToggle();
});

To achieve expected result, use below option
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
Subcategories parent
Find li greater than 1 (li's index starts from 0 )
Hide by default, using jQuery(this).find('li:gt(1)').hide()
code sample for reference - https://codepen.io/nagasai/pen/omYKzv?editors=1010
jQuery('li.children.level1').each(function () {
if (jQuery(this).find('ul').length) {
jQuery(this).append('Sub-Categories');
}
jQuery(this).find('li:gt(1)').hide()
});
jQuery('.subCat').click(function () {
jQuery(this).parent().find('li:gt(1)').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/office-signage">
<span>Office Signs</span>
</a>
<ul class="level 1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/wash-hands-hygiene">
<span>Wash Hands and Hygiene</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/entrance-and-exit">
<span>Entrance & Exit Signage</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/office-signage/way-finding">
<span>Way-finding Signage</span>
</a>
</li>
</ul>
</li>
<li class="children level1">
<a href="https://dev.holmescustom.com/signage/shop-by-template">
<span>Shop by Template</span>
</a>
<ul class="level1" style="display: block;">
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/smoking-no-vaping-signs">
<span>Smoking & Vaping</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/parking-signs">
<span>Parking</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/store-hours">
<span>Store Hours</span>
</a>
</li>
<li class="level2">
<a href="https://dev.holmescustom.com/signage/shop-by-template/restrooms-signs">
<span>Restrooms</span>
</a>
</li>
</ul>
</li>

Change your javascript that do the slideToggle as this;
jQuery('.subCat').click(function () {
var ul = jQuery(this).prev('ul:first.level1');
var li = ul.find('li:gt(1)');
li.slideToggle();
});

JQuery Expand and collapse Tree List

I'm new on jquery. I have a list with sub list. I want to apply expand/collapse function to all of them.
html:
<ul class="tree-child">
<li class="link">
<span>folderrename</span>
<ul>
<li class="link">
<span>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>
I want to expand/collapse on <span>folderrename</span> on click with + and - icon. For icon I use font awesome.
Reference Fiddle.
How to do this?

You could use slideToggle() :
$('#folder_rename').on('click',function(){
$(this).next('ul').slideToggle();
})
Hope this helps.
$('span').on('click',function(){
$(this).next('ul').slideToggle();
$(this).find('i').toggleClass('fa-minus fa-plus');
})
span{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="tree-child">
<li class="link">
<span id='folder_rename'>
<i class="fa fa-minus"></i>
folderrename</span>
<ul>
<li class="link">
<span><i class="fa fa-minus"></i>TR</span>
<ul>
<li class="link">
<span>Test</span>
</li>
</ul>
</li>
<li class="link">
<span>movefolder</span>
</li>
<li class="link">
<span class="">Rel 7.60_SOLASE</span>
</li>
<li class="link">
<span>TestStdFolder1</span>
</li>
</ul>
</li>
</ul>

how to add class to tag when i click on it

I need to add class="active" to tag <li> when i click on <a> to become <li class="active">
Notice i have multiple <li> tags and i need to class="active" only for tag <li> that i clicked on it.
this my sample code :
<ul class="nav">
<li>
<a href="...">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="...">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>

Use .parent() and .addClass()
$(function(){
$('a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active');
})
})
.active {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
Personal Informations <i class="pe-7s-user"></i>
</a>
</li>
<li>
<a href="#">
Qualifications <i class="pe-7s-note2"></i>
</a>
</li>
</ul>