using JQuery append how to push list values to another div section on button click
For example:
I have two list values
1.Adam
2.Lance
if i click on add button the Adam value should be added to another div section same for lance.. etc
https://jsfiddle.net/oa2hfLum/3/
help me out in achieving it Thanks!
html
<div>
<ol id="sortable">
</ol>
</div>
<div>
<ul id="draggable">
<li>
<div>
<label class='lbl'>
Lance
</label>
<button>Add To Top container</button>
</div>
</li>
<li>
<div>
<label class='lbl'>
Adam
</label>
<button>Add To Top container</button>
</div>
</li>
</ul>
</div>
JQuery
$(document).ready(function() {
$("button").click(function () {
$("#sortable").append('<li></li>');
});
});
You can get the label text using .prev() and .text()
$("button").click(function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
JSFiddle demo
I think that you could use this:
$(document).ready(function() {
$("button").click(function () {
$("#sortable").append('<li>'+$(this).prev('label').text()+'</li>');
});
});
Demo: https://jsfiddle.net/oa2hfLum/4/
Change
$("#sortable").append('<li></li>');
to
$("#sortable").append('<li>'+$(this).parent().find('label').html()+'</li>');
Related
When I click the button I want to grab the li from the list and then trigger an event as if I had clicked on the li itself. In other words, I'm trying fire a click event on the menu from the button.
The code I have below returns the document object and not the parent LI.
pen here : https://codepen.io/GerdSuhr/pen/WKZLYQ?editors=1011
$('#switch button').on('click', function(){
var text = $(this).text();
var myLI = $('dl-menu li a span:contains(text)').parent().parent();
console.log(myLI);
//$(myLI).trigger('click.dl-menu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="dl-menu">
<li><span>aero</span></li>
<li><span>bio</span></li>
<li><span>lab</span></li>
</ul>
<br>
<br>
<br>
<div id="switch">
<button>bio</button>
</div>
Your logic is almost there, you just need to concatenate the value of the text variable in to the selector, and then raise the click event:
$('#switch button').on('click', function() {
var text = $(this).text();
var $myLI = $(`.dl-menu li a span:contains(${text})`).closest('li');
$myLI.click();
});
$('li').click(function() {
console.log(`You clicked the ${$(this).text()} <li> element`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="dl-menu">
<li><span>aero</span></li>
<li><span>bio</span></li>
<li><span>lab</span></li>
</ul>
<br /><br /><br />
<div id="switch">
<button>bio</button>
</div>
Also note the preferred use of closest() over chained parent() calls
$('#switch button').on('click', function (event) {
var text = $(this).text().trim();
var $industry = $('ul.menu li[data-industry="'+text+'"]');
$($industry).trigger('click.menu');
});
this.$menuitems.on('click.menu', function(){
// slide menu code
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li data-industry="aero"><span>aero</span></li>
<li data-industry="bio"><span>bio</span></li>
<li data-industry="lab"><span>lab</span></li>
</ul>
<br /><br /><br />
<div id="switch">
<button>bio</button>
<button>lab</button>
<button>aero</button>
</div>
I need div.edit-button to toggle its sibling div.additionalFieldForm.
Note that there's more than one div.edit-button and div.additionalFieldForm on the page, but I would like to target the div.additionalFieldForm that is in the same "family" as the div.edit-button that was clicked.
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).closest("div").prev().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
I've tried other selectors but I couldn't specifically target just the div.additionalFieldForm sibling of the edit button being clicked.
EDIT: I realize that there must be an underlying problem because the selector works on jsFiddle (http://jsfiddle.net/wf7jjoq7/), but not on my site, without any console errors.
Try using siblings()
$(".edit-button").click(function () {
$(this).siblings(".additionalFieldForm").toggle();
});
Try this solution:
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).parent().find(".additionalFieldForm").first().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
li is the common parent. So,
$(".edit-button").click(function () {
$(this).closest("li").find(".additionalFieldForm").toggle();
});
Currently i have something like this
<ul class="patient-class" id="patientSelection">
<li>
<label for="plist">
<div class="patient-details"><span class="pheading">Foo</span><span class="page">14 years</span>
</div>
</label>
</li>
</ul>
Now I have a jquery function that tells me which li item is clicked
<script>
$("#patientSelection li").click(function() {
alert('Clicked list.'+$(this).value);
});
</script>
Now my question is how can i alert out the link to the 14 years. which is SomeLink. Essentially i just want to capture the linked text ?
You can use .find() to get the anchor element, the you can get .text()
$("#patientSelection li").click(function() {
console.log($(this).find('.page a').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="patient-class" id="patientSelection">
<li>
<label for="plist">
<div class="patient-details">
<span class="pheading">Foo</span>
<span class="page">14 years</span>
</div>
</label>
</li>
</ul>
Use .find() to find the descendants of the li's element being clicked :
$(this).find( 'a' ).text();
I've the following code :
<div class=myClass>
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="">Tata</li>
<li data-value="389" class="">Titi</li>
<li data-value="387" class="">Toto</li
</ul>
</div>
When I'm clicking on 'a' link, I want to simulate a click on the fisrt 'li' with a trigger.
But how to do that ? I'm looking to use triggers, but it seems difficult to use in this case.
Could you help me please ?
You can have a click handler which can select the li based on its data-value attribute like
$('#click').click(function(){
$('.selectMultiList li[data-value="517"]').click()
})
You can do it by calling a JS method:
Click for option Tata
function clickOnOption(activeElement){
$('.selectMultiList li[data-value="'+activeElement+'"]').click();
}
Using jQuery you can make it quite dynamic, just make sure the class and data-item attribute match
As an example I just made it alert the data value. If you change data-item to "titi" it would alert 389
Example:
$('.clicker').on('click', function (e) {
$('.' + $(this).attr('data-item')).trigger('click');
});
$('.library li').on('click', function () {
alert($(this).attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
Click for option Tata
</div>
<div class="selectMultiContent">
<ul class="selectMultiList library">
<li data-value="517" class="tata">Tata</li>
<li data-value="389" class="titi">Titi</li>
<li data-value="387" class="toto">Toto</li>
</ul>
</div>
currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.
Currently I'm stuck at here.
$("li").click(function(){
$(this).css('background-color',"#6F0")
})
http://jsfiddle.net/eMLTB/112
Hide all .tabContent elements on page load and show them on click of li.
Write:
JS:
$("li").click(function () {
$($(this).find("a").attr("href")).toggle();
$(this).toggleClass("active");
});
CSS:
.active {
background-color:#6F0;
}
.tabContent {
display:none;
}
DEMO here.
Check the line of script where i placed a comment, I think after adding this solves your problem.
<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
<li id="a">0</li>
<li id="b">5</li>
<li id="c">10</li>
</ul>
<div class="tabContent" id="tabs-1" >
<h2>Testing1</h2>
</div>
<div class="tabContent" id="tabs-2">
<h2>Testing2</h2>
</div>
<div class="tabContent" id="tabs-3">
<h2>Testing3</h2>
</div>
</nav>
And in your Script
var i;
$("li").each(
function(){
$(this).click(
function(){
i = $(this).find("a").attr("href");
$(i).toggle();
}
);
}
);
$("li").click(function(){
$('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
$(this).css('background-color',"#6F0")
})
First, put the class attribute for <li> tag, example :
<ul id ="ta" class="nav">
<li id="a" class="navi">0</li>
<li id="b" class="navi">5</li>
<li id="c" class="navi">10</li>
</ul>
next, make your code like this :
$("li").click(function(){
$(".navi").css('background-color', "");
$(this).css('background-color', "#6F0");
});
I would suggest using the .toogleClass() method.
It is similar like .toogle() but better for CSS manipulation.
First create class in your CSS that will represent your color and then toogle that class.
http://api.jquery.com/toggleClass/