We Keep Coding

Jquery :contains selector without children

I need to do a function to change color (in this example) of dom element in javascript(jquery) but i have some trouble with :contains selector but i need to use because i don't have specific ID or class.
HTML :
<p id="title">John</p><!-- contain John must be red -->
<div id="description">John</div><!-- contain John must be red -->
<div id="element">
<p id="element1">John</p><!-- contain John must be red -->
<p id="element2">Anonymous</p><!-- dont contain John dont change color -->
</div>
ID in this code just to show you my problem.
Js :
$("div:contains('John'), p:contains('John')").css("color", "red");
Problem :
This script make unwanted changes (#element2)
I already check : Jquery doc but to simple dom in this example .
Testable example here : JSFIDDLE

Try to use exclude the div with other elements,
$("div:contains('John'):not(:has(*)), p:contains('John')").css("color", "red");
If your html have chances of containing elements like this,
<div id="description">John<p>test</p></div>
Then ultimately you have to go along with #TrueBlueAussie's answer.
DEMO

You could create your own filter that removes children elements and checks the textNodes of the current element only.
As the string you're trying to match is present in the comments as well, any use of innerHTML is out, so textContent is used.
$("#bug").on('click', function () {
$("div, p").filter(function() {
var clone = this.cloneNode(true);
while (clone.firstElementChild) {
clone.removeChild(clone.firstElementChild);
}
return clone.textContent.indexOf('John') != -1;
}).css("color", "red");
});
FIDDLE

Get value with javascript from a tag inside a tag

I need to extract data from such code:
<div class="rateCalc_InfoLine2">
<span style="font-size:12px;">
Text1 - <b><font color="red" size="2">$ 500</font></b>;
Text2 - <b><font color="red">$ 30</font></b>
</span>
</div>
So basically, I need to find the value 30 that is inside the 2nd font tag of the span tag that is inside div tag with the class rateCalc_InfoLine2. The structure is static, so I dont need to worry about mistakes ( only the value 30 will change )
I know hoe to get the value of the div like this:
$(".rateCalc_InfoLine2").html();
but how to get the specific one I need?
Answer: $(".rateCalc_InfoLine2 font").eq(1).html().replace('$ ', '');

You can first find the font elements within div using descendant selector and then use index to find the second element using eq().
Live Demo
$(".rateCalc_InfoLine2 font").eq(1).html();
Edit to remove the $
strResult = $(".rateCalc_InfoLine2 font").eq(1).html().replace('$ ', '');

$(".rateCalc_InfoLine2 font:eq(1)").html();
or
$(".rateCalc_InfoLine2 font:last").html();

Well, in this specific scenario you could do this:
$(".rateCalc_InfoLine2 font")[1].innerHTML;

To select the value from inside a tag you need to use html()
var value = $(".rateCalc_InfoLine2 font").eq(1).html();

Just try this:
$(".rateCalc_InfoLine2 font")[1].innerHTML;
Demo JSFiddle

The following would select the relevant element, access its textual content with the text() method, match() any numeric value inside it, and assign it to sum:
var price = $('.rateCalc_InfoLine2 font:eq(1)').text().match(/\d{1,}/);
if (price) { var sum = price[0]; }
In your example, sum would be assigned the value 30.

jQuery Selector Confusion

I have the following code..
<span class="under">
texthere
<ul class="list">
<li> list text here</li>
</ul>
</span>
When i run $(".under").text() I get "textherelist text here" .
I've tried $(".under :not(.list)").text() and get underfined.
I also dont get the correct output for $(".under").not(".list").text()
So my last attemp was $(".list").parent().text()
which results in textherelist text here
Where am i going wrong with something so simple?
p.s. doesn't have to be jQuery can be JavaScript if its simpler.
Wanted result: texthere

So I'm guessing you're after the text : texthere ?
var elem = $(".under").clone(),
text = $.trim(elem.children().remove().end().text());
FIDDLE
Clone the element, remove all children elements and get the remaining text.
​

From the docs:
Description: Get the combined text contents of each element in the set
of matched elements, including their descendants.
So yes, that behavior is expected.
You can try this to get only the immediate text node of a selector:
$('.under').contents().filter(function(){ return(this.nodeType == 3); }).text()
Explanation:
.contents() (docs) returns the children of a selector, including textnodes
Description: Get the children of each element in the set of matched
elements, including text and comment nodes.
.filter() takes a callback to return only things you need, based on this, you are only taking those with nodeType == 3, which is a text node.
http://jsfiddle.net/R4Pzf/

Here you go:
var text = $('.under').contents(':not(.list)').text();
Example:
http://jsfiddle.net/ak4FU/1/

jQuery creating and modifying elements

I'm using an HTML snippet to insert some text into the element, then display it somewhere:
var elemTemp = $('<span /><strong class="value unit" />').find('span').text('hi!').end();
elemTemp.appendTo('#someDiv');
I want to insert "hi" inside the span but could not get it working. The find() method doesn't seem to find the span.

find looks down the DOM tree, but your span is not a descendant, so find won't find it. Use siblings instead:
var elemTemp = $('<span /><strong class="value unit" />').siblings('span').text('hi!').end();
Here's a working example. Note that this produces HTML along the lines of:
<span>hi!</span>
<strong class="value unit"></strong>
I'm not sure if you were aiming for that, or if you wanted the strong to be a child of the span.

Why not do this as simply and quickly as possible?
$('#someDiv').append('<span>hi!</span>'); // or whatever HTML you want in there

You have to specify which span-tag you want to insert "hi" into. The easiest way is to set a class on the span-tag.
HTML:
<span class="hello"></span>
jQuery:
$('span.hello').html('hi');

How can I get a <p> element in a <td>?

I want to get a "p" element which is inside a "td". How can I get it? My code is:
<td id="mytd">
<p> aaaa </p>
<p> bbbbb </p>
<p id="myp"> cccc </p>
</td>
I can get the td using. document.getElementById("mytd"), but I don't know how to get the p with id="myp".

Just use exactly the same code getElementById, but use the ID of the <p> instead of the <td>:
var p = document.getElementById("myp");
p.style.background = "#000";
p.style.color= "#FFF";
Here's a jsFiddle showing it working.

document.getElementById("myp")
If you output valid HTML, your IDs you use for DOM elements should be unique for the whole document. Thus, you can do something as simple as this. If this doesn't work (got more elements with this ID), deal with that problem instead. IDs should be unique.

you could try this jQuery as well :
var p = $("td#mytd p#myp");
Then you can get html or text p.html(); or p.text();
Correction :
I don't think td#anyid(tag name is redundant) is necessary because IDs are unique in document you need those only if you were using classes so I think should do(if you use jQuery that is) :
var p = $("#myp");

with jQuery
$("p[id$='myp']")