jQuery, Looping through paragraphs and getting text - javascript

So basically with jQuery, I am trying to loop through 3 paragraphs containing tweets. The 3 paragraphs are all of class .tweet-text
For some reason, in the following code, $test2 will be set properly to the first tweet's text, but in the each loop, the js crashes whenver i try to set str. Why is this?
var $tweets = $(".sidebar-tweet .tweet-text");
var $test2 = $tweets.text();
alert($test2);
$tweets.each(function(i, $tweet){
var str = $tweet.text();
alert(str);
});
I've been trying to debug this with Firebug but to no avail. Thanks for the help.

var $tweets = $(".sidebar-tweet .tweet-text");
$tweets.each(function(i, current){
var str = $(current).text();
alert(str);
});
The issue was that the current object is not by defalt a jquery object, you must wrap it $(current) ... to use the jquery methods

try this instead
var str = $(this).text();

Because $tweet will be a regular javascript object, not a jQuery object. You'll need to wrap it like:
var str = $($tweet).text();

The second argument to the .each method is not a jquery object, but the actual DOM element.
So you need to wrap it in jQuery again..
var $tweets = $(".sidebar-tweet .tweet-text");
var $test2 = $tweets.text();
alert($test2);
$tweets.each(function(i, tweet){
var str = $(tweet).text();
alert(str);
});
demo: http://jsfiddle.net/gaby/xjmZy/

Related

How to get the text within the a tag present in javascript variable

I want the text present in anchor tag which is present in javascript variable.
var a= 9374227
i want "9374227"
How can i get it?
Assuming a can be made as a string, use jQuery text()
var a = '9374227';
var jQueryAnchor = $(a);//convert to jquery object
var text = jQueryAnchor.text();
console.log(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Try this out. It will give you the result as expected.
var temp = document.createElement('div');
temp.innerHTML = '9374227';
var number = temp.childNodes[0].innerHTML;
console.log(number);

Selecting inside a DOM element

This is the html code
<div class="extra-sub-block sub-block-experience">
<h6 style="display:inline;" id="exp-pos-0" class="extra-sub-block-head sub-block-head-experience">CEO</h6>
</div>
<div class="extra-sub-block sub-block-experience">
<h6 style="display:inline;" id="exp-pos-1" class="extra-sub-block-head sub-block-head-experience">COO</h6>
</div>
There are several such similar structures. Now I try to extract the values from each block.
var temp=document.getElementsByClassName('sub-block-experience');
var result=$(temp[0]+"#exp-pos-0");
This throws an error. I followed selecting element inside another DOM
I also tried
var temp=document.getElementsByClassName('sub-block-experience');
var result=temp[0].find('h6');
This doesn't work as well. What am I doing wrong here. Help?
For extracting the values from all blocks, you can use .map() function as follows:
var results = $('.extra-sub-block-head').map(function(){
return $(this).text();
})
Demo
side note: Since id is unique in a document, you can directly access the element using id selector like var result= $("#exp-pos-0");instead of var result=$(temp[0]+"#exp-pos-0");
Try, var result=$(temp[0]).find('h6');
Even, in the documentation link that you gave in question, it shows that you should wrap your result from document.getElementById in $() to be applied with jQuery. What it does is, that it converts the native javascript object into a jquery object.
Demo
function testIt(){
var tags, index;
tags = document.getElementsByTagName('h6');
for (index = 0; index < inputs.length; ++index) {
//do something ...
}
}
If I am correct you are trying to get ceo and coo?.If that's the case then with jquery:
var x= $('.extra-sub-block h6');
//values are
$(x[O]).html();
$(x[1]).html();
You could also use plain javascript:
var result = document.querySelectorAll('.sub-block-experience h6');
Or if you like it separate:
var temp = document.querySelectorAll('.sub-block-experience');
var result = [];
for(var i = 0, elem; elem = temp[i]; i++) {
result = result.concat(elem.querySelectorAll('h6'));
}
But be aware of the browser compatability of querySelectorAll and querySelector.

Get content of tag value using Javascript

i want know how i can retrieve the content of an HTML inner tag value for a specific ID, for example:
<span id="mycount" value="100">1</span>
i want retrieve the 100 value, i have tried this:
var num = document.getElementById('mycount').value;
i have also tried this:
var anchors = document.getElementById('mycount');
var num = anchors.value();
but doesn't work, how i can do it?
using jquery:
var num = $("#mycount").attr("value");
jQuery.attr()
Tag span can't have value property, it's not valid. Yes, it works, but it's a bad practice. Instead, you can use valid HTML5 attribute data-*.
In your case, that will be:
<span id="mycount" data-value="100">1</span>
and jQuery code to get this data value with .data() function is:
$(document).ready(function(){
var myvalue = $('#mycount').data('value');
alert(myvalue);
});
DEMO: http://jsfiddle.net/KhmGL/
var num = document.getElementById('mycount').getAttribute('value');
Take a look # MDN element.getAttribute.
to get attribute values we have to use getAttribute().
to get the value of mycount
var mycount = document.getElementById("mycount");
var num = mycount.getAttribute("value");
alert(num);

Javascript string concatenation issue

I am trying to create a new jQuery variable from some text and another jQuery variable.
This is what I have tried but it just displays "+emc+" instead of the value that the variable is set to.
var emc = $(".emc").attr("value");
var new_page = "index.php?emc=+emc+";
The new_page variable should display index.php?emc=XXXXXX but instead it displays as index.php?emc=+emc+
If I've understood correctly:
var new_page = "index.php?emc="+emc;
Or, indeed:
var new_page = "index.php?emc="+$(".emc").val();
You made a mistake in your string concatenation. You wanted to do this:
var new_page = "index.php?emc="+emc;
You have included the variable in the constant your code must look like:
var emc = $(".emc").attr("value");
var new_page = "index.php?emc="+emc;

Getting an element as jQuery object from a set of elements

Is there a way to get an element from a jQuery object, but as jQuery object?
If I wanted to get the text of elements, presently I'd write it like this:
var elements = $(".set");
for (var idx=0; idx<elements.size(); idx++) {
var text = $(elements.get(idx)).text();
// do something with text
}
Note that I have to wrap elements.get(idx) in another jQuery call $().
I realize this isn't that big a deal, I just want to make sure I'm not doing extra work if there is an easier way.
Have a look at .eq() [docs]:
// returns the third div (zero-indexed) in a jQuery wrapper
var $mydiv = $('div').eq(2);
Is this what you mean?
Why not go with:
$(".set").each(function (idx) {
var text = $(this).text();
// do something with text
});
you can use:
$(".set").each( function () {
var text = $(this).text();
// do stuff
});

Categories

Resources