Develop Reference

How to find direct parent with specific text using jquery?

I have requirement where I wanted to find the amount fields like $412,341.40 from document.
I tried $("div:contains($)").css("background-color","yellow") but it returning parent div's also, and i just wanted color the child ones.
for e.g see the below image, the above jquery coloring both div's parent and child.
How can i color child div only? I am trying find all div's which contains string like $123,55.60.
Any help is greatly appreciated.

This will give your the direct parent.
$('div>:contains("$")').last().css("background-color","yellow")
JSFIDDLE DEMO
EDIT: The above will work great for only one occurrence of $. For multiple occurrences of text, use below code. This makes use .each() and looks for a closing </div> tag each time.
var divs = $('div>:contains("$")');
divs.each(function() {
var htmlinner = $(this).html();
if(htmlinner.indexOf('</div>') == -1) {
$(this).css("background-color", "yellow");
}
});
JSFIDDLE DEMO[2] for multiple occurrences

use:
$("div:contains('$')").find('div').css("background-color","yellow")

What's a good way to show parts of an element but hide the rest?

I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.
The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.
Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.
trimmer = function(element){
x = $(element+' *:not(.safe)');
x.hide();
}
trimmer('section');
Fiddle

var element = 'section';
//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();
//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();

Horen was right, it is indeed impossible to show parts of a hidden element.
To make only parts of the text disappear, the non-safe content must be labeled for removal.
$(element).contents().each(function() {
if (this.nodeType == 3)
$(this).wrap('<span class="disappear" />');
});
You can read more about this answer here:
How to add spans to all areas of a node that isn't restricted

jQuery filter and html return strange result

Why the following code not work as expected? (Select all elements before the div with class = clear?)
HTML:
<div id="text">
line0
<div>line1</div>
<div>line2</div>
<div class="clear" />
<div>dummy</div>
<p>dummy</p>
</div>
JS:
var allow = true;
var output = $('#text *').filter(function(index) {
if( $(this).attr("class") == 'clear') {
allow = false;
}
return allow;
}).html().trim();
alert( output );
​Output:
line1
Expect:
line0
line1
line2

This happens because as the .html() says
Get the HTML contents of the first element in the set of matched
elements.
So though both of your div is selected only one is returned by .html()
Check this fiddle to verify you code is returning both elements.
And as other have already said you should use the .hasClass method.
UPDATE
As that line0 is not inside any node, its a textNode, You can loop and add span tags around textNodes first. Or you wont be able to apply styling to that text. Check the following code
var whitespace = /^\s*$/;
$('#text').contents().filter(function(){
return this.nodeType == 3 && !whitespace.test(this.nodeValue);
}).wrap('<span></span>');
This loops through all childNodes(including textnodes) and wrap non-space textnodes with span.
So after that your line0 will be inside a span tag like <span>line0</span>. So now if you do
$('.clear').prevAll().css('color', 'red');
It will highlight line0 too.
Check Node Types Doc on MDN
Working Fiddle

Because the html() method returns the contents of the first element in the selector.
http://api.jquery.com/html/
If the selector expression matches more than one element, only the first match will have its HTML content returned.

$('.clear').prevAll().css('color', 'red').fadeOut(2000);​
Live DEMO
And by the way, if you want to check if an element has a class use .hasClass(class)
Example:
var hasClass = $(this).hasClass('clear');

Check if div has less than two children

I've just started using jQuery, and can't get my head around this.
I need to check if a div contains anything but a h3 header tag.
The structure of the html is as follows:
<div id="myContainer">
<h3>A header that is always present</h3>
any html, plain text or empty
</div>
Here's the jQuery:
if ( $("#myContainer h3:only-child") ) {
$("#myContainer").css("display", "none");
}
The above will simply hide the div if there is no other html elements present, which is not what I intend since it will also contain plain text. I have tried with other selectors and functions, but I just can't seem to get it right.
Thanks in advance :)

I think you want a function which will tell you if the div contains just H3 or also has other elements. I don't think there is a direct jQuery selector for that, so I wrote a simple function to checkForJustH3.
DEMO - That shows how to hide div that just has H3.
Check out the below demo by editing the div contents and Hit Run to see the result.
DEMO
function containsJustH3 (el) {
var result = true;
$(el).contents().each (function() {
if (this.nodeName != 'H3') {
//check for blank line or empty spaces
if (this.nodeType == 3 && $.trim(this.nodeValue) == '') {
return true;
}
result = false;
return false;
}
});
return result;
}
And using the above function you can do something like,
if ( containsJustH3("#myContainer") ) {
$("#myContainer").css("display", "none");
}

Try:
$("#myContainer").children('h3').hide();
jsfiddle

You can wrap the 'plain text' in a p element and use this selector:
fiddle
$("#myContainer").children().not('h3').hide();
//Select all children but not the h3
HTML:
<div id="myContainer">
<h3>A header that is always present</h3>
<p>any html, plain text or empty</p>
</div>

You can use the length property to see how many children the div has
$("#myContainer").children('h3').length

The fundamental problem here is that jQuery methods like children will not get text nodes. If you want to see how many children a div has, and include the text nodes, you'll want to grab the actual dom node, and check the length of its childNodes property. This will include text nodes.
if ($("#myContainer")[0].childNodes.length > 1) {

var $cont=$('#myContainer'), $children=$cont.contents().not('h3');
if( ! $children.length) {
$cont.hide();
}
Using contents() method will check if there are tags or text nodes in element, check if the children object has length, if not hide the container

You can use $("#myContainer").contents().length to get the number of nodes, including text nodes. However, this includes the newline before the <h3>, etc.

jquery .each() loop

i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3

You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/

This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)

You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});