Question

How can I prepend to a class specifically descended from $(this) e.g. I only want to prepend to the div that’s actually clicked in this example…

<div>
 <div class='target'></div>
</div>

<div>
 <div class='target'></div>
</div>



$('div').click(function(){
  $('<div>hello</div>').prependTo('.target');
});

Answer 1

Only hook the relevant divs, then use this within the handler (but see also below, I can read your question two different ways):

$('div.target').click(function(){
  $('<div>hello</div>').prependTo(this);
});

Within an event handler hooked up via jQuery, this refers to the specific DOM element you hooked the handler to that received the event. See the bind or on documentation for details.

Live example (You also had the } and ) at the end reversed, causing a syntax error.)

If your goal is to have a click anywhere on the outer div prepend in front of the target div, it’s more like this:

$('div').click(function(){
  // Look for "target" divs within this div
  var target = $(this).find("div.target");

  // Did we find any?
  if (target[0]) {
    // Yes, prepend to it/them
    $('<div>hello</div>').prependTo(target);

    // And stop the event
    return false;
  }
});

Live example There we’re using this again, but this time we’re using it to find out if the div the event has propagated to contains a div with the class “target”. If so, we prepend your “hello” div and stop the event via return false; (you could use event.stopPropagation(); instead).