We Keep Coding

Apply class to parent UL if child LI contains specific class

I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function(){
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>
If anyone has any ideas on how this can be done your help would be greatly appreciated!

From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function() {
$('ul>li>ul>li').each(function() {
if ($(this).hasClass('current_page_item')) {
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background: #ddd;
}
.current_page_item {
background: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>

You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link => {
link.onclick = function() {
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
}
})
.current_page_item {
background-color: aliceblue;
}
.side_open:before {
content: 'I have side open class';
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function(){
$('ul.main_ul>li>ul.sub_ul>li').each(function(){
if($(this).hasClass('current_page_item')){
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>

How to programmatically change the click event from a html element

I will try to explain my problem followed by an example:
I'm wondering to switch li position and make them behave like the li that was already there:
Here's the sample:
I would like to click in the left column li change the place and then behave just like any other li from right column....
If you try to click back the li won't go back to the left column.
please help
$('ul.my-list-left li').on('click',function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$('ul.my-list-right li').on('click',function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>

Delegate the events so that newly appended elements get the event bound when they are moved from column to column:
$('ul.my-list-left').on('click', 'li', function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$('ul.my-list-right').on('click', 'li', function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});

use $(document).on() to also take into account newly bounded DOM elements
$(document).on('click', 'ul.my-list-left li' ,function () {});
$(document).ready(function() {
$(document).on('click', 'ul.my-list-left li' ,function () {
var total = $('ul.my-list-right li').length;
$('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}
});
$(document).on('click', 'ul.my-list-right li', function () {
var total = $('ul.my-list-left li').length;
$('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index()))
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>

Hide/show li items based on the category filter clicked

I have a list of li items whose categories have been added to the class. 1 means it is associated with that category, 0 means it is not. When first visiting the page, they will all appear "View All". Clicking "Fruits" will show all items that have "fruits-1" in them. Clicking "View All" will show ALL items.
Filter by:
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul>
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
What should I do to these items (add classes or ID's or whatever) to make it so when I click a category, only the ones that belong to that category appear? and the rest are hidden?

Try this : you can use text of clicked anchor to find matching categories and show them. see below code
$(function(){
$('ul li a').click(function(e){
e.preventDefault();
var category = $(this).text().toLowerCase().split("&");
if(category[0]=="view all")
{
$('ul.category li').show();
}
else
{
//hide all categories
$('ul.category li').hide();
$.each(category, function(i, v){
$('ul.category li.'+v.trim()+"-1").show();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul class="category">
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>

$('.links li a').on('click',function(e){
e.preventDefault();
var className = $(this).text().toLowerCase();
$(".content li").not('.' + className).hide();
$(".content li" + "." + className).show();
})
.content li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="links">
<li>Fruit </li>
<li>Veg </li>
<li>Nuts</li>
<li>Drinks</li>
</ul>
<ul class="content">
<li class="fruit veg nuts drinks">Product 1</li>
<li class="drinks">Product 2</li>
<li class="veg nuts drinks">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>

Let say you have this
<ul class="listed-values">
<li class="fruit,veg,nuts,drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg,nuts,drink">Product 3</li>
<li class="veg,nuts">Product 4</li>
</ul>
and this one
<ul class="filter-ul">
<li>Fruit</li>
<li>Veg</li>
<li>Nuts</li>
<li>Drink</li>
</ul>
Here is jquery code
$(document).ready(function(){
$(".filter-ul li a").click(function(){
var text = $(this).text().toLowerCase();
$('ul.listed-values li').hide();
$('ul.listed-values li').filter(function(){
return $(this).attr('class').indexOf(text) != -1;
}).show();
})
})

Add a data-category attribute to each filter to indicate which category it should display. Then use that in a selector to match the class of the products.
The proper way to separate multiple classes is with spaces, not commas.
$("#filters a").click(function() {
var category = $(this).data("category");
$("#products li").hide();
$("#products li." + category).show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Filter by:
<ul id="filters">
<li>Fruit
</li>
<li>Veg
</li>
<li>Nuts
</li>
<li>Drinks
</li>
</ul>

In html classes are separated with spaces not with comma.
html code:
<ul class="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li><a href="" class='category'>Fruit</a></li>
<li><a href="" class='category'>Veg</a></li>
<li><a href="" class='category'>Nuts</a></li>
<li><a href="" class='category'>Drinks</a></li>
</ul>
JS Code:
$(function() {
$(".category").on("click", function(e) {
e.preventDefault();
var products = $(".products").find("li");
products.show();
var cat = $(this).text();
products.not('.'+cat.toLowerCase()).hide();
});
});
You can find the working demo here : http://jsfiddle.net/crL054px/

Try this
JS Fiddle is here http://jsfiddle.net/cfzdq7f7/
HTML
<ul>
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li class="category">Fruit</li>
<li class="category">Veg</li>
<li class="category">Nuts</li>
<li class="category">Drinks</li>
</ul>
Javascript
$(document).ready(function() {
$(".category").click(function() {
if($(this).html() == "Fruit") {
$(".veg").hide();
$(".nuts").hide();
$(".drink").hide();
$(".fruit").show();
} else if($(this).html() == "Veg") {
$(".fruit").hide();
$(".nuts").hide();
$(".drink").hide();
$(".veg").show();
} else if($(this).html() == "Nuts") {
$(".fruit").hide();
$(".veg").hide();
$(".drink").hide();
$(".nuts").show();
} else if($(this).html() == "Drinks") {
$(".fruit").hide();
$(".nuts").hide();
$(".veg").hide();
$(".drink").show();
}
});
});
CSS
.fruit, .veg, .nuts, .drink {
display:none;
}
.category {
cursor:pointer;
}
Let me know if it is helpful

How to wrap groups of li tags inside ul

I have a navigation menu that contains a bunch of li tags and some of them having this class "sub-item" and I want to group those li tags inside a ul so my navigation which is like this :
<ul class='main-menu'>
<li>Home</li>
<li>Pages</li>
<li class='sub-item'>_Contact Us</li>
<li class='sub-item'>_Community</li>
<li class='sub-item'>_About Me</li>
<li class='sub-item'>_Blog</li>
<li>DropDown </li>
<li class='sub-item'>_Sub Menu 1</li>
<li class='sub-item'>_Sub Menu 2</li>
<li class='sub-item'>_Sub Menu 3</li>
<li class='sub-item'>_Sub Menu 4</li>
<li>Sign Out</li>
</ul>
Will become like this :
<ul id='main-menu'>
<li>Home</li>
<li>Pages</li>
<ul class="sub-menu">
<li class='sub-item'>_Contact Us</li>
<li class='sub-item'>_Community</li>
<li class='sub-item'>_About Me</li>
<li class='sub-item'>_Blog</li>
</ul>
<li>DropDown </li>
<ul class="sub-menu">
<li class='sub-item'>_Sub Menu 1</li>
<li class='sub-item'>_Sub Menu 2</li>
<li class='sub-item'>_Sub Menu 3</li>
<li class='sub-item'>_Sub Menu 4</li>
</ul>
<li>Sign Out</li>
</ul>
This is my attempt to do this but unfortunately it didn't worked :
$('.main-menu li a').each(function() {
var $this = $(this),
content = $this.text();
if (content.indexOf('_') != -1) {
$this.parent('li').addClass('sub-item');
}
});
$('.sub-item').wrapAll('<ul class="sub-menu"></ul>');
Here is a JsFiddle demo : http://jsfiddle.net/hc05fhxr/1/

The desired output given in your question is invalid as li can't have ul as its content.
I possible alternate is to add the new ul as a descendant of the previous anchor
$('li:not(.sub-item)').each(function() {
var $li = $(this),
$subs = $li.nextUntil(':not(.sub-item)');
if ($subs.length) {
$('<ul />', {
'class': 'sub-menu'
}).html($subs).appendTo($li);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='main-menu'>
<li>Home</li>
<li>Pages</li>
<li class='sub-item'>Contact Us</li>
<li class='sub-item'>Community</li>
<li class='sub-item'>About Me</li>
<li class='sub-item'>Blog</li>
<li>DropDown </li>
<li class='sub-item'>Sub Menu 1</li>
<li class='sub-item'>Sub Menu 2</li>
<li class='sub-item'>Sub Menu 3</li>
<li class='sub-item'>Sub Menu 4</li>
<li>Sign Out</li>
</ul>

You should use a combination prev() and after()
$('.main-menu li').each(function(index, el) {
var el = $(el);
if (!el.hasClass("sub-item")) {
el.after($("<ul></ul>"));
} else {
el.prev("ul").append(el);
}
});
$('.main-menu ul:empty').remove()
Here is your fiddle updated:
http://jsfiddle.net/hc05fhxr/3/

How to switch style sheets dynamically using jquery?

Hi I have a page for which I have four different style sheets like this
<link rel="Stylesheet" href="fancydropdown.css" title="style-1" type="text/css" />
<link rel="Alternate" href="fancydropdown_1.css" title="style-2" type="text/css" />
<link rel="Alternate" href="fancydropdown_2.css" title="style-3" type="text/css" />
<link rel="Alternate" href="fancydropdown_3.css" title="style-4" type="text/css" />
And this is my HTML
<div id="menu">
<ul class="tabs">
<li><h4>In the blog »</h4></li>
<li class="hasmore"><span>Styles</span>
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
</li>
<li class="hasmore"><span>Topics</span>
<ul class="dropdown">
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li class="last">Topic 4</li>
</ul>
</li>
<li><h4>Elsewhere »</h4></li>
<li><span>About</span></li>
<li class="hasmore"><span>Networks</span>
<ul class="dropdown">
<li>Twitter</li>
<li>posterous</li>
<li>SpeakerSite</li>
<li>LinkedIn</li>
<li class="last">See more…</li>
</ul>
</li>
<li><span>Bookmarks</span></li>
this my dropdown class
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
when I click on style-1 and so on the style sheets shoud be change .....How can I do this using jquery? Can any one help me?
And please provide me the library's to be used to?

You just change the HREF of your stylesheet.
... HEAD
<link rel="Stylesheet" href="style1.css" >
... BODY
<ul class="dropdown">
<li><a data-stylesheet="style1.css">style 1</a></li>
<li><a data-stylesheet="style2.css">style 2</a></li>
<li><a data-stylesheet="style3.css">style 3</a></li>
</ul>
... SCRIPT
$('.dropdown a').click(function(ev){
ev.preventDefault();
$('link').attr('href',$(this).data('stylesheet'));
});

Please try following which works fine. See demo here http://jsfiddle.net/fLzck/
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
$(".dropdown a").click(function() {
var thisRel = $(this).attr('rel');
//alert(thisRel);
$("link[rel='stylesheet']").attr('href', thisRel);
})​