I am trying to update the text of a link with the text from the item clicked. I thought that $(this).text(); would capture the element's text as a jQuery object, but nothing is happening. I tried writing a fiddle but it gives me a post error.
Fiddle
$(".country-label").on("click", function() {
var updateCountry = $(this).text();
console.log(updateCountry);
$('#country-label').text(updateCountry);
localStorage.setItem('CountryName', updateCountry);
});
Canada
<ul class="dropdown">
<li><label>Select your Country</label></li>
<li>United States</li>
<li>Australia</li>
<li>France</li>
<li>Germany</li>
</ul>
The issue(in your Fiddle) is that you're passing a string, updateCountry, instead of the variable. The jQuery should look like this:
$(".country-label").on("click", function(event) {
event.preventDefault();
var updateCountry = $(this).text();
$('#country-label').text(updateCountry);
console.log(updateCountry);
});
You also did not include jQuery in your Fiddle, I have updated it here:
Updated Fiddle
Try this..
$(".country-label").click(function(event) {
event.preventDefault();
var updateCountry = $(this).text();
$('#country-label').text(updateCountry);
console.log(updateCountry);
});
And I change jsfiddle setting as:
FIDDLE
Related
I'm using foundation drop-down
You can have a look at it here:
http://foundation.zurb.com/docs/components/dropdown.html#
I've created a dropdown with the following code
<a href="#" data-dropdown="drop1" >Date Range </a>
<ul id="drop1" class="f-dropdown large date-menu" drop-down-content>
<li id="custom">Custom</li>
<li id="today">Today</li>
<li id="yesterday">Yesterday</li>
<li id="sundaytoToday">This Week(Sun-Today)</li>
<li id="montoToday">This Week(Mon-Today)</li>
</ul>
I want to get the value/id of the selected element
I've tried like below, but it's not working
$('#drop1').click(function(){
var ss=$('#drop1').val();
console.log(ss);
});
I'm a newbie to programming any help appreciated.
Thanks in advance
UPDATE: How to close the dropdown on click?
You need .text() or .html() not .val().
.val() works with form elements like input, select, radio, checkbox etc.
$('#drop1 li').click(function(){
var ss = $(this).text(); //this refers to current element clicked here.
//to get id
var id = this.id;
console.log(ss, id);
});
“this” Keyword
here is correction
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
});
update
$('#drop1 li').click(function(){
var id=$(this).attr('id');//to get id of clicked element
console.log(id);
var h=$(this).text();//to get text of clicked element
console.log(h);
$(this).parent().fadeOut(300);
$('.open').removeClass('open');
});
as per doc, class open is added to selected element. you can get selected using:
$('#drop1').click(function(){
var ss=$('this).find('.open').html();
console.log(ss);
});
I found a lot of info about this, but I haven't foundanything that could help me yet.
My problem is that I have got a div with its id and it supposes to be a container (#cont_seguim).
I have a menu on the right side which contains circles (made by css and filled with text), like following:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
where b and n are the format for background and text.
When I click a circle, this one must be added to the container (notice that each circle has got its own text), but I can't get that.
I made and array and used alert() to test that click works, and it does, but append() doesn't even work to print text, and I don't know why.
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append(text);
});
return text;
});
</script>
Thank you for your responses!
Your code seems to work fine (if you fix the different class name used in html vs script circulo_menu vs circle_menu)
Demo at http://jsfiddle.net/7jbUj/
To add the whole circle append the whole element and not its text by using .append(this)
$(".circle_menu").click(function() {
$("#cont_seguim").append(this);
});
Demo at http://jsfiddle.net/7jbUj/1/
To add a copy of the circle, so you can add multiple of them use the .clone() first..
$(".circle_menu").click(function() {
var clone = $(this).clone(false);
$("#cont_seguim").append(clone);
});
Demo at http://jsfiddle.net/7jbUj/3/
Inside the click handler, this refers to the clicked element. And since you bind the click handler on the circle_menu element, this refers to that. You can use it directly for the appending or clone it to make a copy first..
unable to understand properly, hope below one can help you.
<script type="text/javascript">
$(document).ready(function() {
$(".circulo_menu").click(function() {
var myText = $(this).html();
alert("calling " + myText);
$("#cont_seguim").html(myText);
});
});
</script>
make sure classname and id name will remain same as html
Try using html() instead of text().
Try this: Demo
HTML:
<div class="circle_menu b">
<div class="text_menu n">ECO</div>
</div>
<div id="cont_seguim"></div>
Javascript:
$(document).ready(function() {
$(".circle_menu").click(function() {
var text = $(this).html();
console.log("calling " + text);
$("#cont_seguim").append(text);
});
});
Try this:
$( ".container" ).append( $( "<div>" ) );
source
use
$("#container").append($("<div/>", {id:"newID",text:"sometext"}));
You could try
<script type="text/javascript">
var arrayS = new Array();
$(document).ready(function() {
$(".circulo_menu").click(function() {
var text = $(this).text();
alert("calling " + text);
$("#cont_seguim").append($(this).html());
});
return text;
});
</script>
By this way the clicked circle element get added to div
I have an html list something like this:
<li id="tag">red</li>
<li id="tag">yellow</li>
<li id="tag">blue</li>
How can I get the content of these li tags using jQuery?
For example;
$tags = red, yellow, blue
You can use jQuery.map()
Live Demo
texts = $('li').map(function(){
return $(this).text();
}).get().join(',');
var $tags = $("li").map(function(){
return $(this).text();
}).get().join(",");
Here, have a fiddle: http://jsfiddle.net/KTted/2/
First, you should change your id="tag" to class="tag", as you can't have multiple elements with the same id.
You can build an array of the values:
var content = [];
$("li").each(function (element) {
content.push[$(element).text()];
});
Or as others have pointed out, you can use map:
var content = $("li").map(function() {
return $(this).text();
}).get().join(",");
I have simple list:
<ul id="tabs_nav">
<li id="t_00">data</li>
<li id="t_01">data</li>
<li id="t_02">data</li>
<li id="t_03">data</li>
</ul>
Now: How do I get the html of the first element, depending on what is ID. I would add that all of ID's change dynamically with the click of the button. This is my code:
btn.on('click',function(){
var ladder_nav_tabs = $('#tabs_nav'),
first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
first_ladder_element_inset_html = ladder_nav_tabs.find(first_ladder_element_inset_id).html();
console.log(first_ladder_element_inset_html);
});
Thx for help.
Seems you are missing the id selector #.
You are trying to get the html from the selector:
ladder_nav_tabs.find(first_ladder_element_inset_id).html();
This won't work as an id selector needs the #. Like this:
ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
Try the following to fix your code:
btn.on('click',function(){
var ladder_nav_tabs = $('#tabs_nav'),
first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
console.log(first_ladder_element_inset_html);
});
DEMO - Updating to valid id selector syntax
Alternatively you could shorten your code using jQuery's eq, similar to this:
btn.on('click',function(){
var theHtml = $('#tabs_nav li').eq(0).html();
console.log(theHTML);
});
Don't use jQuery purely as a selector engine:
btn.onclick = function() {
console.log(document.getElementById('tabs_nav').children[0].innerHTML);
};
Check out the jQuery first-child selector. Specifically:
btn.on('click',function(){
var first_child = $('#tabs_nav li:first-child');
var first_child_html = first_child.html();
});
Try this:
btn.on('click',function(){
var ladder_nav_tabs = $('#tabs_nav'),
first_ladder_element_inset_id = ladder_nav_tabs.find('li:first-child').attr('id'),
first_ladder_element_inset_html = ladder_nav_tabs.find(first_ladder_element_inset_id).html();
console.log(first_ladder_element_inset_html);
});
You have tou use :first-child
I have 5 (maybe more) li elements.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I want to get which elements was clicked(which row??). If random user clicks Two I want to get $("li:eq(1)")(as typed).
How can I get this result?
You can use jQuery.index. Something like this:
$('ul > li').click(function() {
alert($(this).index($(this).parent('li'));
});
You can get the text node value of the clicked item with:
$('li').click(function(){
var clicked = $(this).text();
alert(clicked+" was clicked");
});
$("#ulId li").click(function() {
$(this).something(); //the clicked li is $(this), and you can invoke functions on it.
})
If you give your elements an id such as
<ul id="mylist">
<li id="el_1">One</li>
<li id="el_2">Two</li>
<li id="el_3">Three</li>
<li id="el_4">Four</li>
<li id="el_5">Five</li>
</ul>
Then you can use $(this).attr(id) in the click handler to determine the id of the clicked element. This will also allow to give non sequential ids to your elements, and will detach what's written in the <li> from the actual value you get.
Also, you can encode multiple value in the id (for instance el_5_3) which can be useful sometimes.
$("#mylist li").click(function()
{
var id = $(this).attr("id").split("_");
alert("You clicked the element with id="+id[1]);
});
Working example:
http://jsfiddle.net/jFrdp/
Working example: http://jsfiddle.net/tbugV/1/
$("#mylist li").each(function(index)
{
$(this).data("row", index);
}).
click(function()
{
alert($(this).data("row"));
});
$('html').click(function() {
var el = e.target;
alert(el);
});
As people just keep posting code, and no explanations, I will try the other way around...
The click event handler is called in the scope of the clicked element, so you can use the this keyword to access the element. You can use $(this) to get a jQuery object that contains the clicked element, so that you can use jQuery methods on it.
Example:
$(document).ready(function(){
$('ul li').click(function({
var text = $(this).text();
alert('You clicked on the item with the text "' + text + '"');
}));
});
$('li').click(function(){
alert($(this).html());
});
This code will alert one when user will click the one button.