Swap two items on clicks - javascript

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.

Related

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)

Why jQuery appendTo removes the existing list item?

I am working on a project in which I need to add the list items from list1 to list2 on dblclick of it or either pressing Add button.
So far I have accomplished this Working jsfiddle.
$().ready(function() {
var classHighlight = 'highlight';
var $thumbs = $('ul li').click(function(e) {
e.preventDefault();
$thumbs.removeClass(classHighlight);
$(this).addClass(classHighlight);
});
$('#select1').on ("dblclick","li", function(){
return $(this).appendTo('#select2').removeClass('highlight');
});
$('#select2').on ("dblclick","li", function(){
return $(this).remove();
});
$('#add').click(function() {
$('#select1 .highlight').appendTo('#select2').removeClass('highlight');
});
$('#remove').click(function() {
$('#select2 .highlight').remove();
});
});
But if you see clicking on the list1 item also removes the clicked item from list1 which I dont want to. I only need to copy it from list1 to list2 Can anyone help me with this?
Thank You
When you append an existing element to a new parent, you move it; it doesn't get copied. You should clone the element first and then append cloned element:
$('#select1').on ("dblclick","li", function(){
return $(this).clone().appendTo('#select2').removeClass('highlight');
});
and
$('#add').click(function() {
$('#select1 .highlight').clone().appendTo('#select2').removeClass('highlight');
});
Working Demo
you use clone() function to help in this code
$('#select1').on ("dblclick","li", function(){
return $(this).clone().appendTo('#select2').removeClass('highlight');
});
whole code here
http://jsfiddle.net/s41txkng/4/
https://api.jquery.com/clone/

Count number of selected elements in jQuery

How would I count the number of elements with the attribute of "selected" if the selected attribute is added dynamically on click?
Here is how I'm adding the "selected" attribute:
var $li = $('.swrt_checkbox_button');
$li.on('click', function(){
var $el = $(this);
$el.toggleClass('checkbox-selected');
$el.attr('selected', function(index, attr){
return attr == "selected" ? null : "selected";
});
});
So, what I want to achieve is, if all my elements have the selected attr, then I want to do something, in this case, disable another UI element.
The problem I'm having is this, if I check to see if the attr is selected within the click it works:
if($el.is("[selected]")) {
console.log('yes');
}
This logs inside the click function but not outside it. So how can I say:
If all elements have "selected" attr { do stuff }?
Obviously I can't do it within the click because the $el is pointing to "this".
Any help or advice you can offer would be much appreciated.
Thanks
Since $li refers to the entire list, just compare how many have the selected attribute:
var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;
if (totalElems == selectedElems) {
//All selected
}
You can stick this at the end of your click event, so it'll run each time.
You could add a little line at the ewnd of your click, after activating a selection. Just check if there are any unselected elements left, if not, then run whatever you need.
// Check if there are any unselected left.
if(!$('.swrt_checkbox_button:not([selected])').length){
// Do the all-are-selected thing
}
Here's a quick implementation:
$('li').click(function(e){
e.preventDefault();
$(this).toggleClass('selected');
if(!$('li:not(.selected)').length) alert('all are selected')
})
li {
display: block; widht: 100px; height: 100px;l
}
li.selected { background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
I would like to not that selected is not a prop that should be used on li elements. Just use a class here.
This is how I would do it:
$("#sel").click(function () {
$("input:not(:checked)").first().prop("checked", "checked");
if ($("input[type='checkbox']").length == $("input[type='checkbox']:checked").length) {
alert("All selected :)");
}
});
Here is the JSFiddle demo
Thanks to everyone who commented. Here is what I did to make it work using tymeJV's solution:
function addCheck() {
var $li = $('.swrt_checkbox_button');
$li.on('click', function(){
var $el = $(this);
$el.toggleClass('checkbox-selected');
$el.attr('selected', function(index, attr){
return attr == "selected" ? null : "selected";
});
var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;
if (totalElems == selectedElems) {
$('.checkboxes-btn').removeAttr("disabled");
} else {
$('.checkboxes-btn').attr("disabled", "disabled");
}
});
}
addCheck();
Probably could be cleaner but it works so thanks!

how to remove an element from a selection using Jquery/Javascript before appending to another element?

I have a group of buttons, which I'm adding buttons to dynamically. My selection will look something like this:
$elements = [a.midToggle, a.menuToggle, a.ui-crumbs]
I want to prepend this selection to an existing controlgroup:
<div data-role="controlgroup" data-type="horizontal" class="dropZone">
Some
MidTog
</div>
However before prepending, I want to remove the buttons already inside the controlgroup from my selection, because otherwise they will be in there multiple times.
I'm trying like this, but it doesn't work at all:
// I have multiple controlgroups, so I need to add the buttons to all of them
$('.dropZone').each(function() {
var $first = $(this),
$buttons = $elements.clone();
$buttons.each(function() {
// check if class name on new button is already in controlgroup
if ( $(this).is(".midToggle") && $first.find(".midToggle").length > 0 ) {
$(this).remove();
}
if ( $(this).is(".menuToggle") && $first.find(".menuToggle").length > 0 ) {
$(this).remove();
}
if ( $(this).is(".ui-crumbs") && $first.find(".ui-crumbs").length > 0 ) {
$(this).remove();
}
});
// append what's left
$first.append( $buttons )
I figure my $buttons aren't removed, but I don't know how to get it to work. Also my three if-statements are kind of lame. Is there a better way to do this?
EDIT:
I had to modifiy the solution a little, because each button has multiple classes, so I cannot simply check for attr('class'). This is not perfect, but works:
function clearOut($what) {
$buttons.each(function () {
if ($(this).is($what)) {
$buttons = $buttons.not($what)
}
});
}
// filter for existing buttons
// TODO: improve
if ($first.find('.midToggle')) {
clearOut('.midToggle');
}
if ($first.find('.menuToggle')) {
clearOut('.menuToggle');
}
if ($first.find('.ui-crumbs')) {
clearOut('.ui-crumbs');
}
I shrieked your code into half:
$('.dropZone').each(function() {
var $dropZone = $(this);
var $buttons = $elements.clone();
$buttons.each(function() {
var $button = $(this);
if ($dropZone.find('.' + $button.attr('class')).length)
$button.remove();
});
$dropZone.append($buttons);
});​
$('.dropZone').each(function() {
$buttons = $elements.filter(function() {
if ($('.'+this.className).length) return this;
});
$(this).append( $buttons );
});

Jquery: trying to hide and show on hover on multiple divs with same id plus number

Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks
This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/
You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});
I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);

Categories