We Keep Coding

how to check if a ul has a particular li with jQuery?

I am working on the two ul lists. What I need is if someone click on the list item in list1, it will check if the 2nd list contains the clicked element or not. If it does not contain the element then copy it else just return.
What I have done so far is I am moving the elements successfully between the list but if I apply a check on it everything stops working.
Here is the link of jsfiddle.
$().ready(function() {
var classHighlight = 'highlight';
var $thumbs = $('ul li').on("click", function(e) {
//e.preventDefault();
debugger;
$thumbs.removeClass(classHighlight);
$(this).addClass(classHighlight);
});
$('#select1').on("dblclick", "li", function() {
//if($("#select2").has($(this))
//return;
//else
$(this).clone().appendTo('#select2').removeClass('highlight');
});
$('#select2').on("dblclick", "li", function() {
$(this).remove();
});
$('#add').click(function() {
$('#select1.highlight').clone().appendTo('#select2').removeClass(classHighlight);
});
$('#remove').click(function() {
$('#select2.highlight').remove();
});
});
If you un comment the above lines in code everything stop working.
Can any one please help me with this?
Thanks

Try this check:
var check = function(li) {
return $("#select2 li").filter(function(i, li2) {
return $(li2).text() == $(li).text();
}).length > 0;
};
Demo
As you're using clone(), you can't compare the new cloned element using is() or has() with the orignal one, because it is a new element, it isn't the same, as stated in clone's docs:
Create a deep copy of the set of matched elements
So it's a copy.

You have a missing paren.
This if($("#select2").has($(this)) should be this if($("#select2").has($(this))).
Also you can just pass this: if($("#select2").has(this))
And you have to check length: if($("#select2").has(this).length)

`clone` doesn't add element `after`

I need to clone element and add it after onther elelment. This code supposed to do that but not work
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
tl.clone().after(tl);
});
fiddle is here

You need to use insertAfter()
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
tl.clone().insertAfter(tl);
});
or you need to do it like this with after()
$(document).on('click', '.js-add-faq-row', function(){
var tl = $('.faq-container:last');
t1.after(tl.clone());
});
In your code you are trying to insert element after the cloned element which is not yet part of the dom.
UPDATE : or more better and easy way using after() with callback
$(document).on('click', '.js-add-faq-row', function(){
$('.faq-container:last').after(function(){
return $(this).clone();
});
});

The problem is that you are trying to add tl after the clone, but the clone doesn't exist anywhere yet. You need to do it the other way around:
var clone = tl.clone();
tl.after(clone);

Remove clicked item from list JQuery

I have a simple list where you can add items in html/jquery.
I want to remove a specific item when i click on it in the list.
I can add items, they show up but the remove code is not working.
Remove code
$('#items a.delete').on('click', function(){
$(this).parent().remove();
});
This is my code:
$(document).on('pagebeforeshow', '#home', function(event) {
homepage();
});
$('#items a.delete').on('click', function(){
$(this).parent().remove();
});
function homepage(){
// Fetch the existing objects
objects = getObjects();
// Clear the list
$('#items').find('li').remove();
// Add every object to the objects list
$.each(objects, function(index, item){
element = '<li data-icon="delete">'+item.title+'</li>';
$('#items').append(element);
});
$('#items').listview();
$('#items').listview("refresh");
}
function getObjects(){
// See if objects is inside localStorage
if (localStorage.getItem("objects")){
// If yes, then load the objects
objects = JSON.parse(localStorage.getItem("objects"));
}else{
// Make a new array of objects
objects = new Array();
}
return objects;
}
homepage() gets called when you enter the page, it repopulates the list.
Objects are stored in localstorage.
HTML:
<ul id="items" data-role="listview" data-inset="true"></ul> <br>

You are binding the events before you are appending them to the DOM. When the elements are then appended, you'll need to bind the event after, or use event delegation to find that element. A possible fix would be to move this code block
$('#items a.delete').on('click', function(){
$(this).parent().remove();
});
after you call the homepage() function.

You are dynamically adding new elements, so you need to target the parent element on your event binding:
$('#items').on('click', 'a.delete', function(){
$(this).parent().remove();
});

Swap two items on clicks

I want to select two elements and when I click the button element I want them to swap place, how would I do that? I've searched and looked for similar answers, but most of them only swap the element up or down.
I'm thinking something like:
$('button').click(function(){
$('#item 1 .selected-item').removeClass('.selected-item').appendTo('#item2');
$('#item 2 .selected-item').removeClass('selected-item').appendTo('#item1');
});
But I don't know how to start, it should look something like this:
http://jsfiddle.net/tLNAh/1/ (my fiddle)

try this.
http://jsfiddle.net/tLNAh/3/
$("button").on("click", function() {
$first = $(".selected:eq(0)");
$second = $(".selected:eq(1)");
var tempText = $first.text();
$first.text($second.text());
$second.text(tempText);
$("#instructionText").text("Instructions: choose an item");
});

With your markup do this:
$("button").on("click", function() {
$('.selected').insertBefore($('ul:eq(1) li:first'));
});
Demo
Or you can update to this:
$("button").on("click", function() {
if($('.selected').closest('ul').index() < $('.selected').closest('ul').siblings('ul').index()){
$('.selected').insertBefore($('ul:eq(1) li:first'));
}else{
$('.selected').insertBefore($('ul:eq(0) li:first'));
}
});
Updated fiddle

Chk this : fiddle link
Provide id to your ul :
<ul id="item1">
<ul id ="item2">
And try this :
$("button").on("click", function() {
$("#instructionText").text("Instructions: choose an item");
$('#item1 .selected').removeClass('selected').remove().appendTo('#item2');
$('#item2 .selected').removeClass('selected').remove().appendTo('#item1');
});
$("body").on("click","li", function(e) {
$(this).toggleClass("selected");
$("#instructionText").text("Instructions: choose the item to change place with");
});

You have to get index of list elemet and use this:
http://jsfiddle.net/faceleg/FJt9X/2/
var swapElements = function(siblings, subjectIndex, objectIndex) {
// Get subject jQuery
var subject = $(siblings.get(subjectIndex));
// Get object element
var object = siblings.get(objectIndex);
// Insert subject after object
subject.insertAfter(object);
}
$(function() {
swapElements($('li'), 0, 1);
});

Try this:
function swapItems(first, second) {
var sibling = first.next();
if (sibling.length) {
first.insertBefore(second);
second.insertBefore(sibling);
} else {
sibling = first.prev();
if (sibling.length) {
first.insertBefore(second);
second.insertAfter(sibling);
} else {
var parent = firstItem.parent();
first.insertBefore(second);
second.appendTo(parent);
}
}
}
Updated fiddle
Edit: I updated the fiddle, now you have to click the button to swap items.

Can I use each for elements create on the fly?

Hello can I use each for elements that they are created on the fly?
$('#cart-info .shopp').each(function(){
var cartitem = $(this);
alert(cartitem);
cartitem.find('img.remove').on('click',function(){
alert(cartitem.attr('id'));
});
});
I created elements under div cart-info. But unfortenately the click event does not work. If the elements are provided when the page loads it works. For example look at http://jsfiddle.net/epapathanasiou/jpdZt/1/

$('#cart-info').on('click', '.shopp img.remove', function(){
// this is the `img.remove` element
alert($(this).closest('.shopp').attr('id'));
});
Here is the demo.

use event delegation
$('#cart-info').on('click', '.shopp img.remove', function(){
alert(cartitem.attr('id'));
});

You could also do this:
$('#cart-info .shopp').each(function () {
var cartitem = $(this);
console.log(cartitem.text());
cartitem.find('img').on('click',function () {
console.log(cartitem.attr('id'));
});
});