Question

I have two columns in html with the following markup:

Column 1:

<div id="uni1Query">
<p id="uni1Query1Result" data-sgvizler-chart="sText" data-sgvizler-loglevel="2"><div><p>54.7</p></div></p>
<p id="uni1Query2Result" data-sgvizler-chart="sText" data-sgvizler-loglevel="2"><div><p>34.7</p></div></p>
</div>

Column 2:

<div id="uni2Query">
<p id="uni2Query1Result" data-sgvizler-chart="sText" data-sgvizler-loglevel="2"><div><p>54.7</p></div></p>
<p id="uni1Query2Result" data-sgvizler-chart="sText" data-sgvizler-loglevel="2"><div><p>34.7</p></div></p>
</div>

What I want to do is to get the values from column 1 and compare them to same value in column 2.

So what I want is to compare the value of uni1Query1Result with uni2Query1Result and uni2Query1Result with un21Query2Result and so on. I have a third column where the results should be.

What is the best way o do this?

I tried the following:

r1 = parseInt($("#uni1Query1Result p").val());
console.log(r1);
r2 = parseInt($("#uni2Query1Result p").val());
console.log(r2);
r3 = (r1 - r2);
alert(r3);

But that results in NaN.

Answer 1

You can not nest block level elements within a <p> tag, browsers will close the parent <p> tag. Checking your console in Chrome will show you that.

Also, you should use html() to find the inner value of the tag, and parseFloat to find a float number (not an integer)

parseFloat($("#uni1Query1Result p").html())