I have two lists and when clicked on one element I want to remove it from this list and add it to a second one.
<div id="ul1">
<ul id="selected">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="list2">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>
I am not a jQuery dev and I can't have this working properly.
$("#ul1 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
$("#selected").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
function add2(p1){
$("#list2").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
I would really appreciate if someone could point out the correct solution to accomplish this.
Here is a demo.
Thanks
Just use appendTo method.
$("#ul1").on('click', 'a', function(){
$(this).closest('li').appendTo('#list2');
return false;
});
$("#ul2").on('click', 'a', function(){
$(this).closest('li').appendTo('#selected');
return false;
});
Have a look at this snippet. It checks the click() event of the anchor inside the li, looks for the li by matching the father of the element.
$(document).ready(function() {
$('#select li a').each(function(index, anchor) {
// Let's add a click listener
$(anchor).click(function(){
// Let's find the father li
$(this).closest('li').appendTo('#append');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ul1">
<ul id="select">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="append">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>
Try this way :
$("#ul1 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
("#list2").append(p1);
return false;
}
function add2(p1){
$("#list2").append(p1);
return false;
}
try:
function move(ul1,ul2) {
$('body').on('click',ul1+" a", function(){
$(ul2).append($(this).parent('li'));
//$(this).parent('li').remove();
return false;
});
};
move('#selected','#list2');
move('#list2','#selected');
https://jsfiddle.net/x9LL1ubc/2/
Related
I have this slide up and slide down. I can slide down the child on click but cant slide up when click again.
JavaScript
jQuery("#all li").on("click", function(e) {
e.preventDefault();
var parent = jQuery(this);
var father = parent.data("clicked", true);
var child = parent.find("ul");
var x = child.on(":visible");
if (parent.is(":visible")) {
child.slideDown("fast");
} else {
child.slideUp("fast");
}
});
HTML
<nav>
<ul id="all">
<li>Link 1</li>
<li>Link 2
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
It seems to me, based on your posted script and markup, that the parent is always visible. This means the if statement has essentially no effect. Altering it to check if the child is visible may help:
$('#all li').on('click', function() {
var parent = $(this);
var child = parent.find('ul');
if(child.is(':visible')){
$(child).slideUp('fast');
} else {
$(child).slideDown('fast');
}
});
Fiddle Demo
To achieve your expected result, use slideToggle()
JS:
jQuery("#all li").on("click", function(e) {
e.preventDefault();
var parent = jQuery(this);
var father = parent.data("clicked", true);
var child = parent.find("ul");
var x = child.on("visible");
if (parent.is("visible")) {
child.slideDown("fast");
} else {
child.slideToggle("fast");
}
});
http://codepen.io/nagasai/pen/jAkjBd
is there a way using javascript to find a specific string and delete its' html element.
For example, I have this following html code:
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
and I want to hide "Text 2", first I want to find this string and then hide it.
what I've tried is using html().replace but it hides only the text not the element.
JSFiddle
In jQuery there is :contains
$('.summary li:contains(Text 2)').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
Your fiddle is pretty close. Here's an updated version removing the element from the DOM.
$('.summary li').each(function() {
var $this = $(this);
if ($this.text() === 'Text 2') {
$this.remove();
}
});
http://jsfiddle.net/sLa3dkdd/3/
Iterrate over li elements, check if the text content is the searched value, then hide or remove the element.
$(function() {
$('.summary li').each(function() {
var $this = $(this);
if($this.text() === 'Text 2'){$this.hide();}
});
});
using JQuery you can do it like that :
$('.summary ul').children().each(function () {
if($(this).text() == searchedValue) {
$(this).hide();
}
})
I'm trying to iterate through a list of elements and wrap them in a link tag. However, my list displays differently than I want to.
Here is what it should look like: http://jsfiddle.net/eMexU/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
Here is what it looks like when I use $.each and wrapInner(): http://jsfiddle.net/zpFDa/1/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
JS
$("#list li").each(function () {
$(this).wrapInner('')
});
The only way to do this, is replacing existing li with new ones and then call .listview('refresh') to apply styles / enhance markup.
Demo
$("#list li").each(function () {
var text = $(this).text();
$(this).replaceWith('<li>' + text + '</li>')
});
$('#list').listview('refresh');
What is a cool way to apply this? I need a script that exchange two < li>'s position in an < ul>.
It think that should be possible to achieve. Thanks for your response.
HTML
<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Pseudo Javascript (JQuery)
$("#awesome ul li:eq(1)").exchangePostionWith("#awesome ul li:eq(3)");
HTML Result
<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 5</li>
</ul>
</div>
You can use jQuery's .after() for moving elements around. I cloned one of them so the original can remain as a placeholder. It's like if you wanted to switch variables a and b, you'd need a third temporary variable.
$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
this.after(other.clone());
other.after(this).remove();
};
Now your pseudocode $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); isn't so pseudo :-)
$("ul li a").click(function () {
$(this).parent().insertBefore('ul li:eq(0)');
});
<ul>
<li><a>a</a></li>
<li><a>b</a></li>
<li><a>c</a></li>
<li><a>d</a></li>
<li><a>e</a></li>
<li><a>f</a></li>
</ul>
I have an unordered list like this one:
Show the rest
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
and this jQuery code:
var list = $('#myList li:gt(4)');
list.hide();
$('a#myList-toggle').click(function() {
list.slideToggle(400);
return false;
});
The problem is that it slides each individual li item, i need to slide the rest of the list, like i would slide the whole list.
How can I do that?
your method didn't work because it would find the height with height: auto.
After a lot of fail and try, I came up with something that works, almost.
Do you have any comment on my code, I would really appreciate it.
And how would I do it, if I want the same link to collapse the list again
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var list = $('ul#myList');
var original_height = list.height();
list.css({height:$('#myList li').height()*5});
$('a#myList-toggle').click(function() {
list.animate({height:original_height})
return false;
});
});
</script>
<style type="text/css">
ul#myList {
overflow: hidden;
}
</style>
</head>
<body>
Show the rest
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</body>
</html>
Pretty clumsy solution IMHO, but if it works for you - it works for you...
For the list to collapse and expand by clicking on the same link:
$(document).ready(function() {
var list = $('ul#myList');
var original_height = list.height();
var new_height = $('#myList li').height()*5;
list.css({height:new_height});
$('a#myList-toggle').click(function() {
if( list.height() == original_height ) {
list.animate({height:new_height});
} else {
list.animate({height:original_height});
}
return false;
});
});
Quick & not-so-dirty way: wrap it with a div element and slideToggle('#myList div.wrapper').
You can give a height to UL tag with overflow:hidden. Then you use animation({height:auto}) to show all. Otherwise, you don't have any viable solution.
Whats the problem with simply toggeling the list instead of the elements?
$(function(){
var listheight = $("#mylist").height();
$("a#myList-toggle").toggle(function(){
$("#mylist").slideToggle();
},function(){$("#mylist").animate({height:listheight})});
});