Checking multiple divs to see if h3 is present

Checking multiple divs to see if h3 is present - javascript

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>

Related

How to select the parent elements?

I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out

You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>

JQuery - Creating parent grandparent level text as object

I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->

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 remove li tag by data attribute using jquery

I want to remove li tag by data attribute.
I want to remove 1st ul of child li which has class name like second Base when click.
My code looks like as below
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base">
<span data-addedname="SignatureBread" class="close-btn">Signature Bread</span>
<span data-addedname="Lettuce" class="close-btn">Lettuce</span>
</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces">
<span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span>
<span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>
I want to like this output. Here remove li of first ul.
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses">
<span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients">
<span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span>
<span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>

https://jsfiddle.net/926vogLk/
$('li.second.Base').click(function() {
$(this).remove();
});
or
if you want to remove first li of ul
$('li.second.Base').click(function() {
$(this).prev().remove();
});

If you want to remove only first ul then try #Akhsay mentioned solution. Or if you want to remove any ul with specific class or data attribute then do this.
$("ul[data-id=Base]").find("li.base").remove()
Or
$("li.Base").remove()

I am not sure if I hunderstood right but:
$("li.second.Base").parent().remove()
might help you

$('.second').on('click',function(){
$(this).fadeOut(300,function(){$(this).remove() });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread</span><span data-addedname="Lettuce" class="close-btn">Lettuce</span></li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak</span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span></li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span></li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span><span data-addedname="Pickles" class="close-btn">Pickles</span></li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span></li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span></li>
</ul>
</div>

$(function() {
$('body').on('click', function() {
$('.box-ul').find('ul').find('li.Base:first').remove();
});
});

Adding li as last element from Jquery

is there any easy way to add Li from jquery in below structure
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
i want to add below li after FAQ
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
I have tried below but it is addind in all li's
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().html('<li> Menu 5 </li>');

Use after() to insert after an element
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
or you can use append() for appending content
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>

Use the After() method of JQuery:
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
Here is Fiddle for that.

Develop Reference

JavaScript is the programming language of the Web.

Checking multiple divs to see if h3 is present - javascript

Related

How to select the parent elements?

JQuery - Creating parent grandparent level text as object

JQuery Expand and collapse Tree List

How to remove li tag by data attribute using jquery

Adding li as last element from Jquery

Categories

Resources