I'm probably being especially dense about this, but I can't get an element to return using prev(). My basic HTML structure is:
<div>
<table></table>
</div>
<input type="button">
Where when I press the button, I want to get the previous element (the div element). To achieve this my button has a function attached to it with
var nearestDiv = $(this).prev();
When I've checked the contents of nearestDiv in the console it appears to be some kind of JQuery object rather than a HTML div. I've tried popping .val() at the end of .prev() but this comes back empty. How can I get the div element?
Note that my button is generated on the fly and doesn't have anything which identifies it.
you need to use jquery get function, to get a native html object and not the jquery wrapper:
$("input").on("click",function(){
console.log("jquery wrapper:",$(this).prev());
console.log("native html div object:",$(this).prev().get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table></table>
</div>
<input type="button">
If your html structure is same as you provided in the question, it will definitely return the div element. Note that there is no val() method for div element, you need to either use .html() or .text() inorder to get the contents.
$("input[type='button']").click(function () {
var div = $(this).prev();
alert(div.html());
alert(div.text());
});
Fiddle
You need to give .text() or .html() for standard HTML Elements. So your code should be:
var nearestDiv = $(this).prev().html();
var nearestDiv = $(this).prev().text();
Related
So I have a very basic need here and I can't figure out why it does not work.
For testing purpose I have 100 div's with id's of d_fav100, d_fav101, etc ...
And it just looks like a bunch of these
<div id='d_fav100'>This is DIV 100</div>
.
.
.
My jquery catch to grab the divs looks like this ...
$("[id^='d_fav']").click( function() {
var fav = $(this).val();
alert(fav);
});
However, I cannot get the value in the div assigned to the variable fav. The alert is always blank.
What am I missing?
Thanks for looking!
JT
For a div, you should use the .text() method:
Codepen
$("[id^='d_fav']").click( function() {
var fav = $(this).text();
alert(fav);
});
.val() will get the value for inputs/textareas.
Jquery's text()
It seems you need to delegate the event. Also div does not have any value attribute. If you want to get the text use jquery text method
$('body').on('click' ,"div[id^='d_fav']",function(e){
console.log($(this).text().trim())
})
DEMO
If I understand correctly - you do not want the actual text of the div, but the value (number) of the div - ie: the 100 portion - which is the same in the id of the div.
Use a class and get the id from the div on the click event - remove the d_fav portion using substr(5) - and the remainder is the number you are after.
if it is the text you are after - then you can use the same code but use the .text() method as already described.
$(".d_fav").click( function() {
var fav = $(this).attr('id').substr(5);
alert(fav);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d_fav" id='d_fav100'>This is DIV 100</div>
<div class="d_fav" id='d_fav101'>This is DIV 101</div>
<div class="d_fav" id='d_fav102'>This is DIV 102</div>
well i know many of you would cast it as duplicate but i wanna justify that i have tried everything that i know but its not working, even seeing all answers from SO didnt rectified my problem.Coming to my question
here is my JQuery code-
<script type="text/javascript">
window.onload = show_cart_count();
function show_cart_count(){
var get_count=2;
alert(get_count);
$("#show_count").val(get_count);
//$("#show_count").innerHTML('get_count');
}
</script>
and here is my div tag
<div id="show_count" class="show_count" >0</div>
but despite my efforts the value of show_count doesn't get printed in div.
EDIT-
Just tried my code by placing div to another place and it was working.Any guesses about why its not showing on that particular position
<div class="check"> <a class="bag-icon" href="">Bag(<div id="show_count" class="show_count" >0</div>
0)</a> </div>
This is its surrounding Code.. Any guesses whats wrong in here :)
Use text or html of jQuery.
and 2nd Use document.ready()
function show_cart_count(){
var get_count=2;
// alert(get_count);
$("#show_count").text(get_count);
//$("#show_count").html(get_count);
}
$(document).ready(function(){
show_cart_count();
});
div elements don't have a value property, so you should use text() or html() to update their content:
$("#show_count").text(get_count);
If you want to set the innerText directly you can do either of the below:
$("#show_count")[0].innerText = get_count;
// or
$('#show_count').prop('innerText', get_count);
$(function(){
var get_count=2;
alert(get_count);
$("#show_count").html(get_count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="show_count" class="show_count" >0</div>
For div elements you need to use the html() function instead of Val()
$("#show_count").html("new content");
Use the jquery text function for non-input elements:
var get_count = 2;
$("#show_count").text(get_count);
You are actually executing the function show_cart_count() and assigning what the function returns to window.onload
So window.onload = show_cart_count(); should rather be window.onload = show_cart_count;
jQuery function .val() works for TextArea, Input, Select etc for others to change the innerText you use the fn .text() and to change the innerHTML you use fn .html()
So it will be $("#show_count").text(get_count); or $("#show_count").html(get_count); rather than $("#show_count").val(get_count);
I'm making a simple game in javascript and I would like to .append() a box. To serve as a bullet. But I'm stuck. This is what I have
var existingdiv1 = document.getElementById('bullet');
and
$("#test").click(function() {
$("div").append([existingdiv1]);
});
It wont create additional "divs" when I press the button "#test".
You will have to select the existing div (I guess this is the bullet?). Then append it.
Here's and example:
Working Demo
Javascript:
$("#test").click(function(){
$("#appendToThis").append($('#bullet').html());
});
Html:
<input id="test" type="button" value="click" />
<div id="appendToThis"></div>
<div id="bullet"><div>BANG</div></div>
You will see the word "bang" be appended everytime you click. You can remove it by using the empty() method on the test div.
From the .append documentation:
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).
It seems like you want to clone [docs] the element first:
$("div").append($(existingdiv1).clone());
// or simpler
$("div").append($('#bullet').clone());
Note though that if you have multiple div elements on your page, $("div") will select all of them and the element you pass to .append will cloned automatically (as stated in the documentation).
You should append the element only to a single div.
I believe you wanted to add a new div to the existing div, so your code has been reversed the append order. and you need wrap the existing div by $('#bullet')
Try this
$('#bullet').append('<div></div>');
You can use .clone()
$("#test").click(function(){
$("#appendToThis").append($('#bullet').clone());
});
Good afternoon. I have a table listing days. These days are within a <div>, but I do not have an ID for the <div>. I tried to get the contents of the <div> but it still fails, as it does when I try to get the value.
This is an example of the <div> I'm trying to get the class of.
<div class="fc-day-number">6</div>`
I'm trying to get this value with the Seguito function but am not getting the value of the content div ..
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').val();
alert(diaSelecionado);
});
});
Instead of val(), use .html() to return the element's innerHTML property:
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
val() is used to get the value of form elements, you probably want html():
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
From jQuery documentation:
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
In an HTML document, .html() can be used to get the contents of any element.
You will want to change the $('.fc-day-number').val(); to $('.fc-day-number').html();
i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3
You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/
This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)
You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});