Hide li item if content matches another div - javascript

I currently have content inside the div "company-name", I also have a whole list of items which has the div "item-name". If the content inside 'item-name' matches the content inside 'company-name' (WORD FOR WORD), then I want to display:block; that li, otherwise the li should be HIDDEN.
Also if the "item-name" div is empty/blank, it should also be hidden.
<div id="company-name">ABC Corporation</div>
<ul>
<li>Content for this item - this list item should display:block; because the item-name matches the company-name
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">ABC Corporation</li>
</ul>
</li>
<li>Content for this item - this list item should be HIDDEN - display:block;
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">XYZ Company</li>
</ul>
</li>
<li>Content for this item - this list item should be HIDDEN - display:block;
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">LMN Hardware</li>
</ul>
</li>
</ul>


You can iterate over the item-name elements and see whether its content is matching that of the company-name, if so show it like
var cn = $('#company-name').text().trim();
$('li:has(li.item-name)').hide();
$('li.item-name').filter(function() {
return $(this).text().trim() == cn;
}).parent().closest('li').show()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="company-name">ABC Corporation</div>
<ul>
<li>Content for this item - this list item should display:block; because the item-name matches the company-name
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">ABC Corporation</li>
</ul>
</li>
<li>Content for this item - this list item should be HIDDEN - display:block;
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">XYZ Company</li>
</ul>
</li>
<li>Content for this item - this list item should be HIDDEN - display:block;
<ul>
<li class="location">Australia</li>
<li class="industry">Pharmaceuticals</li>
<li class="item-name">LMN Hardware</li>
</ul>
</li>
</ul>

Related

JQuery insertBefore() duplicating insert

I have the following markup:
<div class="mobile-menu">
<ul>
<li class="product">
Link
<ul>
<li>Link</li>
<li>Link</li>
<li class="item-has-children">
Link has submenu
<ul>
<li>submenu link</li>
<li>submenu link</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
What I'm trying to do is move the submenu (li.item-has-children) as the first li item under .product. So my markup looks like this:
<div class="mobile-menu">
<ul>
<li class="product">
Link
<ul>
<li class="item-has-children">
Link has submenu
<ul>
<li>submenu link</li>
<li>submenu link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</div>
I have managed to move the li item to the top, but it's duplicating. As in my rendered markup with my JQuery below looks something like this:
<div class="mobile-menu">
<ul>
<li class="product">
Link
<ul>
<li>
Link has submenu
<ul>
<li>submenu link</li>
<li>submenu link</li>
<li>
<ul>
<li>Link has submenu</li>
<li>
<ul>
<li>submenu link</li>
<li>submenu link</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The submenu is basically duplicating within each other and aI think it's to do with the way I'm using insertBefore(). I think it's targeting nested li elements too:
$('.mobile-menu ul li.product ul li.item-has-children').insertBefore($('.mobile-menu ul > li.product ul:first-of-type li:first-child'));
I simply want to move li.item-has-children as the first item in the li.product ul

Get index of visible element in jquery

I want to get index of selectedclass between visible elements in jquery.
<ul>
<li>element 01</li>
<li style="display: none">element 02</li>
<li style="display: none">element 03</li>
<li style="display: none">element 04</li>
<li>element 05</li>
<li>element 06</li>
<li class="selected">element 07</li>
<li style="display: none">element 08</li>
</ul>
I have tried these ways
console.log($('ul li.selected').index());
console.log($('ul li:visible.selected').index());
I want the number 3 for the example above: The index of the .selected element in the ul ignoring the elements that aren't visible.

You can use index on the result of selecting the visible elements, passing in the selected element (or a jQuery object containing it). index will find the index of the element within the jQuery set (the visible elements):
var index = $("ul li:visible").index($("ul li.selected"));
Live Example:
console.log($("ul li:visible").index($("ul li.selected")));
<ul>
<li>element 01</li>
<li style="display: none">element 02</li>
<li style="display: none">element 03</li>
<li style="display: none">element 04</li>
<li>element 05</li>
<li>element 06</li>
<li class="selected">element 07</li>
<li style="display: none">element 08</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Find ul with a specific li item in a collection of ul and than add class to it

I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.
I hope I was clear enough for you guys. Let me show you my code for better understanding.
This is a fiddle I created to help you understand my problem.
https://jsfiddle.net/wdwn9swu/
This is what I tried to target the ul I need but it didn't work.
if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
$('ul.sub-tab').find('li.super-active').addClass('super-active');
}
I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!

I think the easiest and simplest way is:
$("li.super-active").parent().addClass("super-active");
According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <ol>).
$('.main-tab>li a').click(function() {
$(this).siblings('.sub-tab').slideToggle(200);
$(this).parent().siblings('li').children('.sub-tab').slideUp(200);
});
$('.main-tab li').each(function() {
id = '10';
$links = $(".main-tab li[data-id =" + id + "]");
$links.addClass("super-active");
//console.log("1234");
});
$("li.super-active").parent().addClass("super-active");
console.log($(".super-active"));
.main-tab ul {
padding-left: 10px;
}
.sub-tab {
display: none;
}
.super-active img {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab">
<li data-id="7">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

Use jQuery's :has selector:
Selects elements which contain at least one element that matches the
specified selector.
Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
Example:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
.sub-tab.super-active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab"> <!-- this will be removed -->
<li data-id="7" class="super-active">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

Hide and show list items of divs after nth item of direct child only

Say I have an unordered list, like so:
Demo
HTML Code :
<ul>
<li>One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>One 1</li>
<li>Two 2</li>
<li>Three 3</li>
<li>Four 4</li>
<li>Five 5</li>
<li>One 11</li>
<li>Two 22</li>
<li>Three 33</li>
<li>Four 44</li>
<li>Five 55</li>
</ul>
<span class="show_more">see more</span>
Script File :
$('.nav_accordian').each(function(){
var max = 4
if ($(this).find('li').length > max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
$('.sub_accordian').click( function(){
$(this).siblings(':gt('+max+')').toggle();
if ( $('.show_more').length ) {
$(this).html('<span class="showMore">show More</span>');
}
else {
$(this).html('<span class="showMore">less More</span>');
};
});
};
});
i did for when i click on 'show more' it should be visible next five results of list items . Once every results loaded 'show more' text would be changed on 'less more'.
and when i clicked upon the 'less more' button first results result items should be visible other items would be hide.
The issue is the script is consider child list of li also

Giving a class to the list element you want to count on should resolve your problem :
<ul>
<li class="list__element">One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li class="list__element">Two</li>
<li class="list__element">Three</li>
<li class="list__element">Four</li>
<li class="list__element">Five</li>
<li class="list__element">One 1</li>
<li class="list__element">Two 2</li>
<li class="list__element">Three 3</li>
<li class="list__element">Four 4</li>
<li class="list__element">Five 5</li>
<li class="list__element">One 11</li>
<li class="list__element">Two 22</li>
<li class="list__element">Three 33</li>
<li class="list__element">Four 44</li>
<li class="list__element">Five 55</li>
</ul>
<span class="show_more">see more</span>
And in your JS you would count then ".list__element", like so :
if ($(this).find('.list__element').length > max) {
...
}

How to split a <ul> into multiple lists based on the CSS class and contents of <li> elements

I have a big unordered list inside a div that I need to be split into multiple lists. The reason for this is that I need to split this stuff into 5 columns for Bootstrap so all the responsive stuff works correctly. I want to split specifically on the About Us, Technology, Patients, and Site Map list elements.
I have tried using jQuery .before to insert some HTML before the "About Us" list item, but the resulting code is messed up because it is invalid HTML. I tried to do something like this, but it didn't work:
var footerLinks = $('#footer ul li');
footerLinks.each(function() {
if ($(this).attr('class') === 'list-header') {
if ($(this).find('a').text() === "About Us") {
$(this).before('</ul></div><div class="span2"><ul>');
}
}
});
Any thoughts? Thanks for your help!
What I have Now
<div class="span2 offset1">
<ul>
<li class="list-header">Home</li>
<li>LASIK</li>
<li>CATARACT</li>
<li>PATIENTS</li>
<li>Cataract Self Evaluation</li>
<li>New Patient Information</li>
<li>Patient Education</li>
<li>3D Eye Library</li>
<li>Vitreo-Retinal Fellowships</li>
<li class="list-header">About Us</li>
<li class="list-header">Doctors</li>
<li class="list-header">Services</li>
<li>Laser Cataract</li>
<li>Cornea</li>
<li>Diabetic Eye Care</li>
<li>Dry Eyes</li>
<li>Flashers & Floaters</li>
<li>Glaucoma</li>
<li>Macular Degeneration</li>
<li>Retinal Detachments</li>
<li class="list-header">Technology</li>
<li class="list-header">News</li>
<li class="list-header">Locations</li>
<li>West Mifflin</li>
<li>Butler</li>
<li>Greensburg</li>
<li>Meadville</li>
<li>Monroeville</li>
<li>Uniontown</li>
<li>Wheeling</li>
<li class="list-header">Patients</li>
<li>Literature</li>
<li>Forms</li>
<li>Patient Education</li>
<li>My AIO</li>
<li class="list-header">Testimonials</li>
<li class="list-header">Clinical Trials</li>
<li class="list-header">Careers</li>
<li class="list-header">Contact Us</li>
<li class="list-header">Site Map</li>
<li class="list-header">Privacy Policy</li>
<li class="list-header">Fellowship</li>
</ul>
</div>
What I want
<div class="span2 offset1">
<ul>
<li class="list-header">Home</li>
<li>LASIK</li>
<li>CATARACT</li>
<li>PATIENTS</li>
<li>Cataract Self Evaluation</li>
<li>New Patient Information</li>
<li>Patient Education</li>
<li>3D Eye Library</li>
<li>Vitreo-Retinal Fellowships</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">About Us</li>
</ul>
<ul>
<li class="list-header">Doctors</li>
</ul>
<ul>
<li class="list-header">Services</li>
<li>Laser Cataract</li>
<li>Cornea</li>
<li>Diabetic Eye Care</li>
<li>Dry Eyes</li>
<li>Flashers & Floaters</li>
<li>Glaucoma</li>
<li>Macular Degeneration</li>
<li>Retinal Detachments</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Technology</li>
</ul>
<ul>
<li class="list-header">News</li>
</ul>
<ul>
<li class="list-header">Locations</li>
<li>West Mifflin</li>
<li>Butler</li>
<li>Greensburg</li>
<li>Meadville</li>
<li>Monroeville</li>
<li>Uniontown</li>
<li>Wheeling</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Patients</li>
<li>Literature</li>
<li>Forms</li>
<li>Patient Education</li>
<li>My AIO</li>
</ul>
<ul>
<li class="list-header">Testimonials</li>
</ul>
<ul>
<li class="list-header">Clinical Trials</li>
</ul>
<ul>
<li class="list-header">Careers</li>
</ul>
<ul>
<li class="list-header">Contact Us</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Site Map</li>
</ul>
<ul>
<li class="list-header">Privacy Policy</li>
</ul>
<ul>
<li class="list-header">Fellowship</li>
</ul>
</div>

My advice is to do the following:
First, create an array of arrays and fill it with references to the list items as you want them in the separate lists.
Generate the new elements outside of the DOM, moving the list items into them.
Last, replace the existing element in the DOM with the newly created elements.
This has three benefits:
It is most efficient to modify the DOM in a single call.
The DOM will never be in an invalid state.
The code to generate the elements should be simpler if you determine the separate lists first.

Categories

Resources