jQuery .next selector ignores the generated div and targets the next div - how can I target the sibling div

I am trying to target a div that is generated by a jQuery plugin. I have been trying to do this using .next but with no luck.

Update: Please note this generated div is triggered by a click

*Update:Here is a fiddle of the code http://jsfiddle.net/clintongreen/PAbAH/1/

The problem is, the next selector ignores the generated div and targets the nex开发者_如何学Got div. I understand that this is not working because the generated div is technically not a sibling.

Does anyone have an idea how I can target this elusive generated div. I can't use css because I only want to hide it when it is generated from certain links.

Code example

//Script
$("div.region_marker").next("div.bubble").hide();

//HTML
<div class="region_marker">Region Marker text</div> //this is how I am targeting the generated div
<div class="bubble">Bubble text</div> //div generated by jQuery, not hard coded, this is ignored by .next
<div class="map_marker">Map Marker text</div> //random div, this is the one that .next targets
<div class="map_marker">Map Marker text</div> //random div

I am open to any suggestions you have, thanks guys

If it's a child, use .find(). If it's a sibling and the very next sibling, use .next(). If it's a next sibling, but not the very next sibling, then use .nextAll().

In your code, this will get the "Bubble text" div generated by jQuery:

$("div.region_marker").next();

This will get the first Map Marker text div:

$("div.region_marker").nextAll(".map_marker").first();

If you really want to hide the first .bubble sibling, then you can use this:

$("div.region_marker").nextAll(".bubble").first().hide();

The only reason that last one would work and your code would not is if the order of the tags isn't quite what you think it is.

P.S. Using selectors like div.bubble and div.region_marker is not necessary unless you're trying to eliminate other types of tags that might have that class. In your situation, you can just use .region_marker and .bubble and save the selector engine a little work.

Thanks I got it working using:

$("div.region_marker").click(function() { $(this).next(".bubble").hide(); });

It works now using the click function to trigger this at the same time, the traditional methods were not working because I ran those functions before the div.bubble was loaded.