We Keep Coding

How to go over every item in an order list using jQuery?

When the page in load/reloaded, I need to loop over each each list item in the order list and apply some logic to it.
Here is what I have done but nothing is being printed in the console as expected.
$(function() {
$(window).load(function(){
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$( "ul.selected_sortable_control_570_0 > li").each(function(index)
{
console.log( $( this ).attr('id') );
});
});
});
Here is my HTML markup
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
How can I correctly loop over each item?

UL has id -> id="selected_sortable_control_570_0"
Use ul#selected_sortable_control_570_0 > li as selector in $ function.
Working snippet
$(function() {
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$("ul#selected_sortable_control_570_0 > li").each(function(index) {
console.log($(this).attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
Note: Window load is not needed. Run the snippet it works.

selected_sortable_control_570_0 is an id in HTML but in your jQuery you are using a class selector. Change .selected_sortable_control_570_0 to #selected_sortable_control_570_0.

$( "li").each(function(index,value)
{
console.log(value.id);
});
COdepen URL for reference- http://codepen.io/nagasai/pen/rLxzJE
added value and value.id will give id of each li and you can logic using each id

Convert <li> text into a clickable link

I've got a scenario where (I won't bore you with the details) I need to convert the text of a series of li's into clickable links (all going to the same destination URL). For instance:
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
I'd like for the countries to be converted into clickable links.
Using:
$( ".link" ).each(function() {
$( this ).css( "color", "red" );
});
I can loop through the li's (although ideally I'd like to be able to 'target' the UL and then it's children removing the need for the class="link"...but that's another matter!) and in this instance simply change the colour of the text but I don't know how to change the text into a link.
Any chance someone could give me some pointers please?
Thanks,
craig

You can use html() to write the inner anchor elements without each() using a callback
$('.link').html(function() {
return '' + $(this).text() + '';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

You can use click since you are using jquery
$( ".link" ).click(function(){
//do something here
alert('clicked');
});
https://api.jquery.com/click/

Consider this:
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" ).html(''+$(this).text()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>
But maybe you do not want real links, but just clickable <li>s?
$('.list-inline').on('click', 'li', function(event) {
alert("Go to link");
})
.find('li').css({cursor:'pointer'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

You can use callback function of .html() method:
$( ".link" ).html(function(i , oldhtml) {
return "<a href='someref"+oldhtml+"'>"+oldhtml+"</a>"
});

You can use the 'wrapInner' function to do this:
$("ul.list-inline li").wrapInner(function() {
return "<a href='somepage.html'></a>";
});
Although if you have access to the source to change the classes, not sure why you don't just code the links in place...

Is this what you're looking for?
<ul class="list-inline">
<li>Australia</li>
<li>Fiji</li>
<li>Oman</li>
<li>Venezuela</li>
</ul>
$( ".list-inline li" ).each(function() {
$( this ).css( "color", "red" );
var country = $(this).text();
$(this).html(''+country+'');
});
Demo: http://jsfiddle.net/6cjex8b2/

If list item has child list, add css style

I have a navigation from a ul, see below:
<nav>
<ul>
<li>Top Link 1</li>
<li>Top Link 2</li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
<li>Top Link 3</li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
</ul>
</li>
</ul>
</nav>
I have my css, hiding the the sub link's "ul" unless hovering the parent "li". (Will not show unless asked, as this is not the issues)
I'm trying to use my JQuery to add a css style (margin-bottom:30px;) to the top level "li" only if it has a child "ul" nested in it. My JQuery is as below:
<script>
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li")) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});
</script>
This does not appear to be working for me, can anyone point out what I'm doing wrong? Or can they provide a better solution to this approach?

.children will always return an array, check .length
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li").length > 0) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});

Try a little something like this :
$('li > ul').each(function(){
$(this).parent().addClass("your class");
});
This will select all uls that are children of li's and apply the class to the respectful li.

you do have an extra </li> in your question which i think is a typo..
<li>Top Link 2</li>
//-------^^^^^here
<ul>
<li><a href="#" >Sub Link 1</a></li>
anyways you check check for length of children if present..
try this
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children().length > 0) {
$("nav ul >li").hover(function () {
$(this).css("margin-bottom", "30");
});
}
});

.children() method returns an object and an object is a truthy value in JavaScript, apart from that if the condition is valuated to true, you are adding a listener to all the li elements not just those that have ul children, You can use .has() method which is a filtering method:
$("nav > ul > li").has('ul').on({
mouseenter: function() {
$(this).css("margin-bottom", "30px");
},
mouseleave: function() {
$(this).css("margin-bottom", "n");
}
});
Or:
li.hovered {
margin-bottom: 30px;
}
$("nav > ul > li").has('ul').on('mouseenter mouseleave', function(e){
$(this).toggleClass('hovered', e.type === 'mouseenter');
});

jQuery menu not hiding on second click

I am trying to learn some jquery and I want to make a simple drop down that is hidden at the start but then appears when you click some text but then hides when you click it again. Here is the Code:
Basic HTML:
<h1 class="Menu">Menu</h1>
<div id="submenu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
<div>
The jQuery:
$(document).ready(function() {
$("#submenu").hide();
});
$(".Menu").click(function() {
$("#submenu").show("slow");
$(".Menu").text("Close Menu");
$(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});
Is it because the class wasn't registered into the DOM at page load so it doesn't know what it is looking for? Also here is the JS Fiddle I was doing it in.

Here, use this js code
$(document).ready(function() {
$("#submenu").hide();
});
$("#mainmenu").click(function() {
if($("#submenu").is(":hidden")){
$("#submenu").show("slow");
$(".Menu").text("Close Menu");
$(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
}
else{
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
}
});
Reason for not working is that you are changing the class at runtime. Use .click, only when you have static selectors. Like i used ID

since CloseMenu class doesn't exist when you bind this event you need to do:
$(document).on('click', ".CloseMenu", function() {
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});

Try .toggle()
$('.Menu').toggle(
function() {
//Do something
},
function() {
//Do Something Else
});
Also try #submenu{display:none;} instead of jQuery.

Two UL's Linked, Click LI and add active to LI in both UL's

I have 2 UL's, one of them is my links and the other is the images.
I want to be able to click an LI from one list then for it to display its linked li from another ul. I hope I have explained it well enough.
I have tried to index the uls in order to come up with a solution but no luck so far. See below for my attempt. Any help is truly appreciated. I am fairly new to jQuery.
JSFIDDLE
<ul class="options">
<li class="active">Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<ul class="destination">
<li class="active">Destination 1</li>
<li>Destination 2</li>
<li>Destination 3</li>
</ul>
$(function(){
$(".options li").each(function(index) {
$(this).addClass('option' + index);
});
$(".destination li").each(function(index) {
$(this).addClass('destination' + index);
});
$(".options li").click(function(e){
$(".options li").removeClass('active');
$(this).addClass('active');
});
});

Try this:
$(".options li").each(
function(index) {
$(this).click(function() {
$(".active").removeClass('active');
$(this).addClass('active');
$(".destination li").eq(index).addClass('active');
})
}
);
You can use the index argument of .each() to determine the index and save it in an anonymous .click function.
JSFIDDLE

$(function(){
$(".options li").click(function(e){
$(this).addClass('active').siblings().removeClass('active');
$('.destination li:eq(' + $(this).index() + ')').addClass('active').siblings().removeClass('active');
});
});
Fiddle

I think this would be the simplest way to do it:
$(".options li").click(function(e){
$(".options li").removeClass('active');
$(this).addClass('active');
$(".destination li").removeClass('active');
$('.destination li').eq($(this).index()).addClass('active');
});
Fiddle