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)

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();
});

How to remove class after it been added

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:
When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed
First step I got out of way and it's working
$(function(){
$('div h3.itemTitle').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Now when I define:
$(function(){
$('div.active').on('click', function(){
$(this).removeClass('active');
});
});
It does nothing, as if it doesn't see classes. It sets only those set in onload...
Help, anyone?

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.
Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.
I recommend this approach: http://jsfiddle.net/c3Q6Q/
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});

Try
$('body').on('click','div.active', function(){$(this).removeClass('active');});
Instead of
$('div.active').on('click', function(){$(this).removeClass('active');});

I would go with this way:
$('div').on('click', function(e){
var el = e.target;
if($(el).is('h3') && $(el).hasClass('itemTitle')){
$(this).parent().addClass('active').siblings().removeClass('active');
}else if($(el).is('div') && $(el).hasClass('active')){
$(this).removeClass('active');
}
});

Not sure why every is talking about elements generated outside of the initial DOM load.
Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/
Code:
$(document).ready(function() {
$('.itemTitle').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
/* $('.parent').on('click', function() {
$(this).removeClass('active');
}); */
$('.clicky').on('click', function() {
$(this).parent().removeClass('active');
});
});
The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.

jQuery Traversing Dynamically generated DOM (next(), prev())

I have an HTML table and jQuery handlers to move rows up and down, using .next() and .prev(), but I also want to add new rows and after adding new row and trying to move old rows up or down they move more positions than expected. Here is an example on jsfiddle http://jsfiddle.net/3CQYN/
$(function() {
initControls();
$('.new').click(function() {
$('<tr><td>TEST</td><td>Up Down</td></tr>').appendTo($('table tbody'));
initControls();
});
});
function initControls()
{
$('.down').click(function() {
var parentRow = $(this).closest('tr');
parentRow.insertAfter(parentRow.next());
});
$('.up').click(function() {
var parentRow = $(this).closest('tr');
parentRow.insertBefore(parentRow.prev());
});
}
Try to move rows up and down, then add few new rows and move the OLD rows up and down again and you'll see the problem.

Every time you add a new row, you rebind the handlers, ending up with multiple handlers bound to individual up and down links. Instead, use event delegation (only executed once, on DOM ready):
$(document).on('click', '.down', function() {
// ...
});
$(document).on('click', '.up', function() {
// ...
});
http://jsfiddle.net/Gt4Zq/
Note that if you can find a container to bind to that is closer to the elements than document, that would be preferable.

jquery Treeview highlighting selected item

i read docs
http://docs.jquery.com/Plugins/Treeview/treeview#options
also googled, but nothing found easy and good solution, how to highlighting the selected item. i use span so not redirect but nothing selected

This code will work for highlighting the file in a treeview:
$(document).ready(function(){
$("#index").treeview();
$('#index span.file').bind('click', function() {
//clear all clicked items if any
$('.selected').removeClass('selected');
//set this clicked
$(this).addClass('selected');
});
});
In jquery.treeview.css:
.treeview span.file.selected { background-color: #F0FFF0; }

You can select li items in the tree and add event listeners to them, like this:
$('#browser li.file').bind('click', function() {
//clear all clicked items if any
$('.clicked').removeClass('clicked');
//set this clicked
$(this).addClass('clicked');
})
Inside handler function 'this' word points to the clicked item.
Or if by 'selecting' you mean something else, you can also listen desired event type like in example.
$('#browser li.file').bind('mouseover', function() {
... your code ...
})

In the tree view, add an id tag to the added branches.
"<li><span id="myNode1" class='file'>Item2</span></li>"
Then you can use jQuery highlight to highlight the selected node.
$("#myNode1").click(function () {
$(this).effect("highlight", {}, 3000);
});
Or permanently change the style
$('#myNode1').css('styleFloat');

It may be out of date but I got past it by adding the following under jqueryFileTree.js's FileTree function (version 2.14)
function FileTree(el, args, callback) {
...
$el.delegate("li a", this.options.folderEvent, _this.onEvent);
$el.delegate("li a", "click", function(event){
$("#" + $el[0].id + " li a.selected").removeClass("selected");
$(this).addClass("selected");
});
}