Develop Reference

.click function, remove class after clicked

I have this function so if I click for example ITEM 1, the sample1 and sample3 will become red because have that specific class (class1).
The problem is that if I click on another item (for example ITEM2), the red items of ITEM1 will remain red and I need them to turn black and highlight in red ONLY the items of current clicked class in the first list.
What to add to below ready(function() in order to do that? Thank you in advance!
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>
This is the function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});
</script>

Use classes to hold the styles, and then just remove the class on all elements, and add it back on the elements matching the class etc
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').removeClass('red')
.filter('.'+ this.className.split(" ").pop())
.addClass('red');
});
});
.red {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="leftcol class1">ITEM 1</li>
<li class="leftcol class2">ITEM 2</li>
<li class="leftcol class3">ITEM 3</li>
<li class="leftcol class4">ITEM 4</li>
</ul>
<ul>
<li class="rightcol class1 class4">sample1</li>
<li class="rightcol class2 class3">sample2</li>
<li class="rightcol class3 class1">sample3</li>
<li class="rightcol class4 class2">sample4</li>
</ul>

Since you are not using class to style items, logic is this, on each click reset color of all items with class .rightcol and after reset add red to one u want. Try something like this:
$(document).ready(function() {
$('.leftcol').click(function() {
$('.rightcol').css('color', 'black');
$('.rightcol[class*=' + this.className.split(" ").pop() + ']').css('color', 'red');
});
});

Have you tried using a variable in which you store the name of the class that you last changed its color from? So whenever your function is called you can change the color back to default and update the variable.
Another option would be to first set all classes colors to default and then execute the line to change the color to red.

Slide up multiple <ul> elements using jQuery

I am trying to construct a jquery statement that will slideUp() all <ul> elements whose siblings don't contain a set of specific classes (.clicked, .chosen).
Suppose I have the following nested <ul> structure:
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>
For the above example, I would like to slideUp() only the 'Cats' <ul> element ('Sylvester', 'Felix', 'Garfield') because none of it's elements use the 'chosen' or 'clicked' classes.
My current jquery statement reads:
$('.mainmenu').first().siblings().not('.clicked, .chosen').slideUp();
This, and everything else I have tried, returns nothing. Suggestions?

You HTML looks challenging :) but somehow, I've managed to create a query to perform what you're looking for.
And if you want to check multiple class for particular element you can use is() as well.
//Check li doesn't have clicked class and then filter ul next to the li
$('.mainmenu > li').not('.clicked').next('ul').filter(function(){
//Find the ul, if it's any of li doesn't have chosen class
if(!$(this).find('li').hasClass('chosen'))
{
return $(this);
}
}).slideUp();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>

JQuery .each only returning one <li>

I have the following HTML:
<ul id="sortable1 venuetags" class="connectedSortable">
<li id="venuetagli">fried</li>
<li id="venuetagli">garlic</li>
<li id="venuetagli">rosemary</li>
<li id="venuetagli">new potatoes</li>
</ul>
And am trying to get the values of each using JQuery:
$('#venuetagli').each(function(j,li) {
console.log(j,li)
})
However, from the console I am only getting the first value returned.

The ids are supposed to must be unique that is why you are getting single element use class selector instead. Also the id of UL would not have space.
Html
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
Javascript
$('.venuetagli').each(function(j,li) {
console.log(j,li)
});
You can simple get the li with ul using parent-child selector
$('#sortable1 li').each(function(j,li) {
console.log(j,li)
});
Just for the test and never recommended way, you can get elements having same id using attribute selector.
$('[id=venuetagli]').each(function(j,li) {
console.log(j,li);
});

Id must be assign to a single element in complete page else it will return only one of those element or unexpected result:
Here is demo with class
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
and jQuery:
$('.venuetagli').each(function(j,li) {
console.log(j,li)
})

jQuery add class numericly up to x and start over

With jQuery I can add consecutive numeric classes to list items like so:
$(".item-list li").each(function (i) {
$(this).addClass("item-list-" + i);
});
So with an HTML structure as such:
<ul class="item-list">
<li>an item</li>
<li>another item</li>
<li>another item</li>
<li>another item</li>
<li>another item</li>
</ul>
... this will output nice list item classes in numeric order:
class="item-list-0"
class="item-list-1"
... etc...
What I'm trying to do is number of to 4 items and then start the numbering over at zero again. I figured I'd have to use nth child within my numeric + i code but I just have not been able to find any documentation on this. Everything that I've found relates to finding an nth element but not starting a count over after a specified amount.

you can do this using modulus operator itself:
$(".item-list li").each(function (i) {
$(this).addClass("item-list-" + (i%4));
});
Output markup
<ul class="item-list">
<li class="item-list-0">an item</li>
<li class="item-list-1">another item</li>
<li class="item-list-2">another item</li>
<li class="item-list-3">another item</li>
<li class="item-list-0">another item</li>
<li class="item-list-1">another item</li>
<li class="item-list-2">another item</li>
<li class="item-list-3">another item</li>
<li class="item-list-0">another item</li>
</ul>
Demo

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>

I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.

I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp

Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});