Develop Reference

Find closest select box with a class from an element

From the starting point of an element that happens to be a select box (element has a class of: service_category_selection) I want to find another select box (element has a class of: service_selection).
I need to grab specifically the closest element with class: service_selection because I don't want to grab all of the elements with that class.
Snapshot of how far away that first select box is from the second select box:
Assume that $(this) already contains the first select box. Now I just need to draw the route to the closest next select box with the class: service_selection.
I attempted to use .closest but it wasn't working for me.
Example: var el = $(this).closest(".service_selection");

You need to get the overall top parent container - then find the element:
var el = $(this).closest(".row").find(".service_selection");

Doing this kind of navigation is a bit hackish and easy to break since your logic highly rely on your layout. I suggest you to use a unique CSS class on that element and access it directly.

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

How do I get the element containing clicked text in Javascript/Jquery?

I would like to replace the text on pages when I click on the text or even just replace the single word clicked on. I have tried a top down approach selecting all elements in the DOM, filtering out the textNodes, wrapping each with tags and adding a click event handler to each tag. But this is far too slow and inefficient particularly on very large and dynamic sites.
I only need to replace the text that was clicked. Is there a bottom up way of doing this starting from the event.target? How do I find the closest textNode to the event.target, for example?

In the example you gave, you can just do the following; for more info see How do I select text nodes with jQuery?
$(document).click(function(event) {
textNodes = $(event.target).contents().filter(function() {
return this.nodeType == 3;
});
textNodes.each( function() {
$(this).replaceWith("New Text");
});
})

Have you tried Jquery's .closest() ?
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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());
});