jQuery .next 选择器忽略生成的 div 并定位下一个 div - 我如何定位兄弟 div答案

【问题标题】：jQuery .next selector ignores the generated div and targets the next div - how can I target the sibling divjQuery .next 选择器忽略生成的 div 并定位下一个 div - 我如何定位兄弟 div
【发布时间】：2011-09-27 02:47:55
【问题描述】：

我正在尝试定位由 jQuery 插件生成的 div。我一直在尝试使用 .next 但没有运气。

更新：请注意这个生成的 div 是由点击触发的

*更新：这里是代码http://jsfiddle.net/clintongreen/PAbAH/1/

问题是，下一个选择器会忽略生成的 div 并以下一个 div 为目标。我知道这不起作用，因为生成的 div 在技术上不是兄弟。

有谁知道我如何定位这个难以捉摸的生成 div。我不能使用 css，因为我只想在它从某些链接生成时隐藏它。

代码示例

//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

我愿意接受您的任何建议，谢谢大家

【问题讨论】：

请发布您的代码。 jQuery是否添加元素应该没有区别。
必须有 more to it than meets the eye... （我猜插入脚本在 DOM 加载之后被调用，但你的脚本被称为之前（所以它技术上当jQuery去寻找它时没有添加它）
代码对我来说看起来不错。会不会是时间问题？即当您执行代码时是否已经生成了气泡 div？
大家好，谢谢，我想你们可能生我的气了，因为我忘了提到 div.bubble 是通过点击生成的。我有一个针对 div.region_marker 坐标的链接，这也会触发 div.bubble 弹出窗口。很抱歉，我之前没有提到过。
我在这里发布了一个 jsfiddle，jsfiddle.net/clintongreen/PAbAH/1 这都是使用移动地图顺便说一句。干杯

标签： jquery

【解决方案1】：

如果是孩子，请使用.find()。如果它是兄弟姐妹和下一个兄弟姐妹，请使用.next()。如果它是下一个兄弟，但不是下一个兄弟，则使用.nextAll()。

在您的代码中，这将获得由 jQuery 生成的“气泡文本”div：

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

这将获得第一个地图标记文本 div：

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

如果你真的想隐藏第一个 .bubble 兄弟，那么你可以使用这个：

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

最后一个可以工作而你的代码不能工作的唯一原因是标签的顺序不是你想象的那样。

附：除非您试图消除可能具有该类的其他类型的标签，否则没有必要使用像 div.bubble 和 div.region_marker 这样的选择器。在您的情况下，您可以只使用.region_marker 和.bubble 并为选择器引擎节省一些工作。

【讨论】：

感谢 jfriend，我尝试了 .nextAll 但没有成功。我更新了我的问题，因为我忘了提到生成的 div 是通过点击触发的。抱歉，我之前忘了提到这一点，我敢肯定这就是为什么传统方法都不起作用的原因。干杯
为什么生成 div 并不重要。重要的是它在 DOM 中的位置。如果这些都不起作用，那是因为你的 DOM 层次结构不是你想象的那样。您将需要向我们展示真实的 DOM 层次结构或插入生成的 DIV 的代码，以便我们可以看到结构的真实样子。如果你的结构是你所说的那样，所有这些都会起作用 - 所以你的 HTML 结构中的某些东西不是你想象的那样。
谢谢我让它工作了： $("div.region_marker").click(function() { $(this).next(".bubble").hide(); });
当我最终成功让 .bubble 类出现时，它不是 .region_marker 之后的下一个兄弟。中间有一些点。我认为您应该使用我对$("div.region_marker").nextAll(".bubble").first().hide(); 的回答中的最后一个建议，这样即使有中间对象，它也只会使用下一个匹配的兄弟姐妹。
您好 jfriend，对不起，我刚刚在网站上尝试过，但没有成功，似乎需要使用点击事件来隐藏它。感谢你的帮助。干杯

【解决方案2】：

谢谢我让它工作了：

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

现在可以同时使用click函数触发这个，传统方法不起作用，因为我在加载div.bubble之前运行了这些函数。

【讨论】：