Develop Reference

Removing dynamically created li containing mulitple sources from ul

<div class="panel-body">
<ul>
<li class="clearfix"><span class="pull-left">One leg</span><img src="images/plus-icon.png" alt="" /><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Two Leg</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Full</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
<li class="clearfix"><span class="pull-left">Half</span><img src="images/plus-icon.png" alt=""><span>Add to Cart</span></li>
</ul>
</div>
<ul id="ae__orders__content">
</ul>
$(document).ready(function () {
$(".clearfix").click(function () {
var temp = $(this).text();
var updatedString = temp.replace("Add to Cart", "");
$("#ae__orders__content").append("<li id=\"" + updatedString + "\" class=\"clearfix\"><span class=\"pull-left\">");
$("#ae__orders__content").append("<b>" + updatedString + "</b></span><img src=\"images/sm-icon.png\" alt=\"\">Remove from Cart</li>");
});
});
I am trying to dynamically add li when someone clicks Add to Cart. It goes to to cart in the ul with id "ae__orders__content". Till this part everything is working fine. but i want to remove li that is added dynamically when remove from cart is clicked. I have tried almost everything and found the solution given below. It removes all the items from UL instead the only LI that is clicked.
$("#ae__orders__content").click(function () {
//$(this).children().focus().remove();
alert("remove");
//$('li', ul).last().remove();
$(this).children().remove();
return false;
});
Add to cart is working fine. I want to remove li when remove from cart is clicked.

It looks like you want the <a> that gets appended to be the click target for removing the li, so:
$(".ae__orders__content").on("click", "a.ae__remove-cart", function () {
$(this).parent().remove();
});

Jquery programatically adding li, getting id returns all li elements

I am adding li elements to a menu programatically every time the user clicks a button. Here is the starting menu:
<ul id="menu">
<li><a href='#'>Add to this menu</a>
<ul class = 'addition'>
</ul>
</li>
</ul>
I then add to it using this:
$("#menu ul.addition").append('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
Where user text is some unique String added by the user. The problem is that when I try to get a specific li from the menu after it is populated, it only returns the first li.
$("#menu ul.addition").click(function() {
var selected = $('#menu ul.addition a').attr('id');
console.log(selected);
});
always logs the first menu item even though there are many being populated. when I change the selection to to select the html like so:
var selected = $(this).html();
console.log(selected);
It just logs every li element added to the menu.
What am I doing wrong here? I need to select the correct menu option that the user clicks on.

When you access an attribute for a set of multiple elements, you'll get the attribute of the first element in the set. In your code, you're selecting the id of the first <a> element in your <ul> upon any click on the <ul>.
In order to identify which <a> was clicked, its easiest to listen for a click on the <a> elements rather than on the <ul> container.
Since the <li> and <a> elements are added after the DOM loads, you'll need to delegate your click handler. I suggest binding the listener to your existing <ul>, but listening for a click on any programmatically-added child li > a element.
Then, you can use JavaScript's this keyword to refer to the clicked element and collect its "id".
var userText="SampleText";
$("#menu ul.addition").append('<li>addition' + userText + '</li>');
userText="AnotherSample";
$("#menu ul.addition").append('<li>addition' + userText + '</li>');
$("#menu ul.addition").on('click','li a',function() {
var selected = this.id;
$('div#output').html(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li><a href='#'>Add to this menu</a>
<ul class = 'addition'>
</ul>
</li>
</ul>
<div id="output"></div>

I think you are more or less on the the right track. If you slightly changed your click function, you can get the ID of the menu option, clicked by the user. Here is a fiddle for it.
$("#menu ul.addition").click(function(e) {
alert(e.target.id);
for (var prop in e) {
console.log(prop + " : " + e[prop]);
}
$('#menu ul.addition a').attr('id');
// console.log(selected);
});

var $li = $('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
$li.click(function(){
var selected = $(this).html();
console.log(selected);
});
$("#menu ul.addition").append($li);
It seems this is what you want

First of all, you have change <a href="#" id=addition' + userText + '> to <a href="#" id="addition' + userText + '">
When you run $('#menu ul.addition a') jquery returns all the <a> nodes, but when you try to get the ID of a set, Jquery selects the first node in the set.
If you want to select a specific item on the list, use the unique ID.
$('#menu ul.addition #your-unique-id).click(doSomething)
if you want to create a generic function for clicking any of the added items:
$("#menu ul.addition").on('click', 'a', function(ev){
console.log(this);
})

If you want to get the specific li you need to use this example:
$("#add").click(function() {
$(".addition").append('<li>Item 1</li>');
$(".addition").append('<li>Item 2</li>');
$(".addition li a").click(function() {
var item = $(this).text();
alert(item);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li>Add to this menu
<ul class="addition">
</ul>
</li>
</ul>

$("#menu ul.addition").on('click', 'li', function() {
console.log($(this).attr('id'));
});

Checking list item hover states to trigger an action - jQuery

I have 4 images in an unordered list. Ideally I want to be able to load all the list items into an array and do a check to see which one is currently hovered.
I know using the jQuery is() function I can check which is in an :hover state. How would I apply this check to all items within that list array?
<ul class="image-list">
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
<li class="image-item"><img src="/image1.jpg"/></li>
</ul>
Thanks for any help.
DIM3NSION

Use the mouseover() function:
// Add mouseover event to all your image-items
$('.image-list > .image-item').mouseover(function() {
// $(this) is your hovered image-item object
alert($(this).find('img').attr('src'));
});
Working jsfiddle

Demo: http://jsfiddle.net/GCu2D/758/
JS:
$(function () {
var li = $("ul li"); //get all li. All li are stored in an array.
$(document).on("mouseover", "ul li.image-item", function (e) {
var ele = $(this); //get currently hovered li.
var item = li.index(ele); //get the index of the currently hovered li in that array
console.log(item); //this logs the index. Using this index, do whatever you want with that item.
});
});

Find if current class contains word, then append new class to those li's - jquery

Having some problems with jQuery methods - perhaps overcomplicating things...
What I need to find is if any of the li elements classes contain the word 'current', then if they do, append the word active to them.
I'm struggling to add the word to the end of the current class. For example:
Markup:
<div class="menu-navigation-container">
<ul>
<li class="current_page_item menu-item-8787"><span>The Magazine</span>
</li>
<li class="menu-item menu-item-type-post_type"><span>Snapped</span>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
var classNames = $('.menu-navigation-container ul li').attr("class").match(/[\w-]*current[\w-]*/g);
$(classNames).each(function () {
$(this).addClass("active");
});
});
Running classnames; up in the console produces just the string - I want it to reference the li elemens that have the word 'current' in their class names, then append the word 'active' at the end.
Can I do this with jQuery's attribute contains selector?

Simply like this :
$(document).ready(function () {
$('.menu-navigation-container ul li[class*=current]').addClass('active');
});

Try this
$(document).ready(function () {
$('.menu-navigation-container ul li').each(function(){
if ( $(this).is(".current") )
{
$(this).addClass("active");
}
})
});

nth-child increase decrease with click

I have a set of li elements forming a menu. When the user clicks a particular li element I want to change the source of an iframe element to the URL that corresponds to the clicked item.
I've tried the function below but it didn't work. Can somebody please advise how to do this?
http://jsfiddle.net/ZnMTK/8/
$(document).ready(function(){
var source1="http://www.hurriyet.com.tr";
var source2="http://www.milliyet.com.tr";
var source3="http://www.vatan.com.tr";
var source4="http://www.ensonhaber.com";
$("#menubar ul li:nth-child(i)").click(function(){
$(this).attr('src', source(i) );
});
});

You can use an array and then use the clicked li elements index to fetch the target source from array.
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
$("#menubar li").click(function(){
$('#iframe1').attr('src', sources[$(this).index()])
});
});
Demo: Fiddle

This type of functionality is what arrays are for:
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
i = 0;
$("#menubar li").click(function(){
$("#iframe1").attr('src', sources[$(this).index()] );
});
});
However, specifying all of your URLs in your JavaScript and relying on the indices matching up with the order of the menu li elements is kind of fragile. I would recommend linking the values more closely, perhaps something like this:
<ul id="menubar">
<li data-src="http://www.hurriyet.com.tr">Hurriyet</li>
<li data-src="http://www.milliyet.com.tr">Milliyet</li>
<li data-src="http://www.vatan.com.tr">Vatan</li>
<li data-src="http://www.ensonhaber.com">Ensonhaber</li>
</ul>
And then with JS:
$(document).ready(function () {
$("#menubar li").click(function () {
$("#iframe1").attr('src', $(this).attr("data-src"));
});
});