Develop Reference

Getting the content inside a span based on its class and id

Im trying to use -
console.log('the favorite count:', $('.favorite-count#'+id).text());
The id variable is correct but when I log it out, it's logging out blank.
This is what the html looks like -
highlighted is the value im trying to get and change in my code

The problem was I was using the same id in two separate places, so the second one I just prefixed with 'count' and now it's working okay.

Your html also looks a little malformed. Your image tag is not closed but has an unclosed < span> inside.
As for your selector try $('.favorite-count [id^=' + id + ']').text()

Mask sensitive text with jquery

I have an element 123456789.
Can I show the number as stars even though the actual number is preserved? The number can be changed with javascript, so it wont help to use
$('.masked_text').text('*************');
I don't know if it is possible to show something without changing the content. I don't want an image placed above the element or something like that, so I'm really out of guesses :-)

You could set in CSS class font to symbols. That way text would become unreadable, unfortunately numbers would remain.
.maskedText {
font-family: Symbol;
}

Just save the number in a variable and replace it with * like so:
var theNumber;
function inputFieldSubmitCallback() {
theNumber = $(".masked_text").text();
$(".masked_text").html(theNumber.replace(/\d/g, "*").show();
}
** you can instead of course store the number in localStorage or a js object... but it's still in the client (not secure.. if that's an issue).

Using jQuery to extract value from a row

I'm building a tic-tac-toe game with javascript. The issue is when I am checking to see if there are any winners on the board after each move.
When I run this jQuery function
$( "#row1")[0].innerHTML
The output is
"<span0>o</span0><span1>x</span1><span2>o</span2>"
Because each html element has a different span I'm not quite sure how to check without writing out all the possibilities. I have looked at SOF and found this Get array of values use JQuery?. It's quite similar but it doesn't account for the different span tags, e.g (span0, span1, span2).
I'm trying to see how I can only get the 'o','x','o' from the list.

To get you "oxo" in a string which you can then process however you see fit, you can use:
// gets you "oxo"
$( "#row1").text();
If you want those characters in an array, you could do this:
// gets you ["o", "x", "o"]
$( "#row1").text().split("");

I don't think that those spans are valid html5 tags. Each of the span tags should just be . If you are using the individual span names to insert text into them, then it is better to do that by id eg . So wherever you are referencing $("span1") or $("#row1 span1") you would instead reference the id like this: $("#square1") in order to insert the x and o text. There are other ways to do this, but for these purposes it is probably just best to have 9 separate ids. This way the example in the link that you referenced to read them into an array is essentially what you need.
If you really don't want to do that, then add a give all of your span tags a class= 'box' class. eg: . In this case the code to read into an array based on the example you provided in the link would have to change from $('#row1 span') to $('#row1 .box') (notice the period before "box". indicating that we are looking for classes, rather than tag names) I don't like this second solution, because it doesn't fix the invalid html5 tags.
I suppose there may be a way to use a wildcard to search all elements that begin with "span" but that would just be way more ugly.

Demo
Below code will do the job
var html = "<span0>o</span0><span1>x</span1><span2>o</span2>";
var values = $.map($(html), function( n, i ) {
return $(n).html();
});
console.log(values);

Here is how you can get it, we will loop through child span elements of #row1 and alert their text value (which is the inner text):
$("#row1").children().each(function()
({
alert($("this").text());
});

How do I get the text for a jquery flexigrid element that does not have an abbr?

I have a column that is a FK and so cannot have the ID value. Instead, I show a String value. All well and good,except when I select a row and take an action, I need that value.
As you may know, flexigrid adds "abbr=" for sortable columns, but leaves them off for non-sorting columns.
I'm sure there is some jquery expression that will work. I thought something like:
$('td:nth-child(4)', this).html()
Here is the HTML structure I am trying to navigate:
Nothing I've tried works - just get syntax errors. Can anyone help?

I finally managed to get this to work. Here is the answer:
$('td:nth-child(4) >div', this).html();
This says: get the 4th td in the selection, then go to the div child; finally, get the html text for the child.
Hope this helps someone else.

Not sure if this works as well:
$('td:nth-child(4)', this).text();

Pass text within a div (number) through calculation in real time?

For lack of a better title, I'm looking to take the example I have in my jsfiddle, and convert it to pull the number that's within a div (it will always be a number):
<div class="output" id="i1">100</div>
And pass that number through a formula, to spit it out in real time to a p tag (doesn't need to be a p tag, could be another div.
<p>200</p> or <div id="i2">200</div>
Where the 200 above, is calculated by adding the original value of the div id #i1, plus 100. Right now, the fiddle shows that when you enter in a value for the input, it spits out the real time calculation.
So the question is, what would it look like where instead of an input value, the function would be pulling the numerical data out of the DIV tag, running it through a function, and spitting it back out into a paragraph tag? I think the bulk of it is completed functionality wise, but can't quite figure out the pulling from DIV text.
Some posts I've looked at already include this one about real time inputs, this one on calculations and displaying, and a few others on here.
SOLUTION
This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.

You may consider using a Observer pattern here.
Check this for more. http://canjs.us/#can_observe

to get the text from a div and then parse it to a float, use this:
parseFloat(document.getElementById('i1').childNodes[0].nodeValue)

This fiddle shows the solution for me. It's far simpler than I had before. There was a solution given below regarding a listener plugin, which looked pretty good, but way overkill for what I needed.
<form id="vcForm">
<div id="i1">100</div>
<p></p>
</form>
​
$("#i1").keyup(function() {
var input1 = parseFloat($("#i1").text(),10);
var input2 = 100;
total1 = parseFloat(input1) + parseFloat(input2);
$("p").text(total1);
}).keyup()​
The value in that first DIV will be dynamic (changing via a slider). Of course, we'll see about real time updates when I expand this out functionally, but for my original question, this answered it.