I want to get an element's value based on the class and the index that it was created.
Fiddle here:
Code (not working)
alert($('.demo-default').length); //works
//alert ( $('.demo-default').get(2).val());
x = $('.demo-default').get(2);
alert(x).val();
//alert ( $('.demo-default').index(2 ).val()); //NW
WORKING :
http://jsfiddle.net/A324T/7/
You need to use eq() instead of x to invoke val() on it, or use .value
With
x = $('.demo-default').get(2); //x is DOM element.
Use
x.value; //Prop on DOM element
With
x = $('.demo-default').eq(2); //x is Jq object.
Use
x.val(); //method on jq object
get() returns the DOM element.
You want to use eq()
First, you use alert function wrong.
Also, jQuery.get() method will return a DOM element. val() method works only with jQuery objects. To fetch the value, simply use value property.
alert(x.value);
Related
var a = $('#txta').val();
console.log(a);
result is complete html code from this url
Now I want to get content of all #artikal-naziv tags (there are 96)
var b = a.find("#artikal-naziv").text();
console.log(b);
Result:
Uncaught TypeError: a.find is not a function
Any help?
Actually you are calling .find() on a string and not in a DOM element.
Because from $('#txta').val() you are getting a string, that's why you got Uncaught TypeError: a.find is not a function, because string doesn't have .find() method.
You should change it to:
var a = $('#txta');
Then you can write:
var b = a.find("#artikal-naziv").text();
Note:
Now I want to get content of all #artikal-naziv tags (there are 96)
You can't set the same id #artikal-naziv for multiple elements (96), the id should be unique in the page.
Another thing .val() call assumes that your element is a form element, you can't call .val() on a div or a span, if it isn't a form element use .html() instead.
Because "a" is not a jQuery object - it's usually a string containing value of the returned element (txta).
Use $(a).find(...) instead - that will probably do it.
Ref link: https://stackoverflow.com/a/3532381/3704489
As per what I can make out of your description, you are getting HTML as string using var a = $('#txta').val();. If this is true, you will have to create an in-memory element and set this string as its HTML.
Then you will have an in-memory DOM section that you can query on.
You can try something like this:
var html = '<span><p id="artikal-naziv">bla bla</p></span>';
var $tempElement = $('<div>').html(html);
console.log($tempElement.find('#artikal-naziv').text());
// or using vanilla JS
var tempElement = document.createElement('div');
tempElement.innerHTML = html;
console.log(tempElement.querySelector('#artikal-naziv').textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
.val() takes out the value from the element....Whereas all DOM operations are done on the element... because function like .find() , .hide() , .show() , .closest() etc are used with the element not the value
The Following modifications should work...
var a = $('#txta'); // $("#ID") returns the element
console.log(a.val()); // $("#ID").val() returns the value
the result is complete html code from this URL
Now I want to get content of all #artikal-naziv tags (there are 96)
var b = a.find("#artikal-naziv").text(); // .find() easily works on element
console.log(b);
Simply use .find to find children and .closest to find parents:
<div class='a'>
<div class='b'>
<div class='c'></div>
<div class='c'></div>
<div class='c'></div>
</div>
</div>
js:
var a = $('.b');
a.find('.c'); // Will return all the objects with the class c
a.closest('.a'); // Will return the first parent with the class a
Having a table like:
<table id="table_1">
<tr><td>1</td><td>foo</td></tr>
<tr><td>2</td><td>foo</td></tr>
<tr><td>3</td><td>foo</td></tr>
<tr><td>4</td><td>foo</td></tr>
</table>
I want to get the first td of each table row.
Then i want to iterate through the findings and compare the text value contained in the td with a value i have.
So far, i can get the first td of each tr by using the following :
var test = $("#table_1").find('td:first-child');
Then i get the number of tds : console.log(test.length);
but when i try to get the text of a td i get an error : console.log(test[1].text());
Error:
Uncaught TypeError: test[1].text is not a function
Obviously i do something wrong. Is my way of thinking wrong? How can i fix it?
test is jquery object of all first child elements. You should be using .eq(0) or .first() to target first element in the collection:
console.log(test.eq(0).text());
or
console.log(test.first().text());
Update: To get all the texts of first-child td elements in array
var allfirsttdtext = test.map(function(){
return $(this).text();
}).get();
Working Demo
test[1] will return underlying DOM element and .text() is a jQuery function thus you are getting the error.
I think, You need to use .eq()
Reduce the set of matched elements to the one at the specified index.
Code
test.eq(0).text()
Note: that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.
OR, Use textContent
test[1].textContent
use textContent in JavaScript bcoz u are converting jquery object into javascript object
console.log(test.eq(0).text());
or
console.log(test[0].textContent);
You have to surround by jQuery as the resulted array is a Dom Elements:
for(i = 0; i < test.length; i++){
console.log($(test[i]).text())
}
Try this:
var v = 'compare';
$('#table_1 td').each(function () {
if ($(this).text() == v)
console.log($(this).text()+' is equal with the variable '+v);
})
console.log(test[1].text());
test -> is an array of htmlDomElement
when you say test[1] -> it gives you a htmlElement not a jQuery object of that element, so you can not use .text() which is jQuery function.
Wrap it with $(test[1]).text() to make it jQuery object to use text() function on it.
I have written a small JS to iterate through a set of matched elements and perform some task on each of them.
Here is the code:
var eachProduct = $(".item");
eachProduct.each(function(index, element){
var eachProductContent = element.find(".product-meta").clone();
});
When I console log element it outputs properly and the exact objects. Why should jquery throw this error?
because element is a dom element not a jQuery object
var eachProductContent = $(element).find(".product-meta").clone();
Inside the each() handler you will get the dom element reference as the second parameter, not a jQuery object reference. So if you want to access any jQuery methods on the element then you need to get the elements jQuery wrapper object.
You are calling .find() on a plain JS object, But that function belongs to Jquery object
var eachProductContent = $(element).find(".product-meta").clone();
You can convert it to a jquery object by wrapping it inside $(). And in order to avoid this kind of discrepancies you can simply use $(this) reference instead of using other.
Use $(this) for current Element
var eachProductContent = $(this).find(".product-meta").clone();
you should change "element" to "this":
var eachProduct = $(".item");
eachProduct.each(function(index, element){
var eachProductContent = $(this).find(".product-meta").clone();
});
[] and .get() both return a collection element at the given index but as a native DOM element. How can i do if i want to retrieve it as a jQuery object ? I'm forced to convert their return value using $() everytime like :
var $third = $($elements.get(3));
And it gets even more horrible if i have to nest it.
Is there some kinf of .at() method that would be used this way :
var $third = $elements.at(3);
Thanks for your help !
The method you are looking for is .eq()
var $third = $elements.eq(3);
How about you try $('.selector:eq(index)')
Assuming I have this:
var wrap = $("#someId");
I need to access the original object that I would get by
var orig = document.getElementById("someId");
But I don't want to do a document.getElementById.
Is there something I can use on wrap to get it? something like:
var orig = wrap.original();
I searched high and low but I didn't find anything; or maybe I'm not looking for the right thing.
The function for this is get. You can pass an index to get to access the element at that index, so wrap.get(0) gets the first element (note that the index is 0-based, like an array). You can also use a negative index, so wrap.get(-2) gets the last-but-one element in the selection.
wrap.get(0); // get the first element
wrap.get(1); // get the second element
wrap.get(6); // get the seventh element
wrap.get(-1); // get the last element
wrap.get(-4); // get the element four from the end
You can also use array-like syntax to access elements, e.g. wrap[0]. However, you can only use positive indexes for this.
wrap[0]; // get the first element
wrap[1]; // get the second element
wrap[6]; // get the seventh element
$("#someId") will return a jQuery object, so to get at the actual HTML element you can do:
wrap[0] or wrap.get(0).
You can use get() to retrieve the HTML element.
var orig = wrap.get(0);
However, if wrap consists of multiple elements, you will need to know the correct index which to use when you use the get() function.
You can just use var orig = wrap[0]; as far as I know, if there's more than one element. If there's just the one, you can just use wrap without $() around it.
You can use wrap still.. Wrap is the same as 'orig' would be in the above! :)
If you really want:
var orig = wrap;