Question

我遇到jQuery问题。如果我有这个代码来填充tooltip div：

<div id="tooltip"></div>
<div class="tooltipMessage">Tooltip Message</div>
<script type="text/javascript">
    $("#id").html($("#tooltip").next(".tooltipMessage").html());
</script>

这很有效，代码使用类名为tooltipMessage的下一个元素，并填充ID为tooltip的元素。

但如果我有这段代码：

<div id="tooltip"></div>
<p>other element</p>
<div class="tooltipMesage">Tooltip Message</div>

undefined已退回。

如果中间存在另一个元素，如何从类名为tooltipMessage的下一个元素中获取HTML？

Answer 1

为什么不将所有元素放在父容器中并使用find（selector）来获取所需的元素？我认为这是一种更好的方法，并为您提供一些防弹隔离。

关于您的问题，您可以使用nextAll('div.tooltipMesage')方法查找所需元素。

Answer 2

我之前通过确保工具提示消息的id与绑定的id具有相同的前缀来解决此问题，然后javascript可以写为

<div id="tooltip1"></div>
<div id="tooltip1Message" class="tooltipMessage>Tooltip Message</div>
<script type="text/javascript"> 
   $(".tooltipMessage").each(function(){
      var destId = $(this).attr("id").replace("Message","");
      $("#"+destId).html($(this).html());
    });
</script>

然后，消息的距离无关紧要，它始终会找到要绑定到

的相应消息

Answer 3

.next()  -Wii get the immediate sibling 
        // Here the immediate sibling of tooltip is  p tag..
        // So it returns a empty selector because it not a immediate 
        // sibling

<div id="tooltip"></div>
<p>other element</p>
<div class="tooltipMesage">Tooltip Message</div>

修改所以你需要使用下一次才能找到它..

$("#id").html($("#id").next().next(".tooltipMessage").html());

OR

使用 .nextAll（）

$("#id").html($("#id").nextAll(".tooltipMessage").first().html());

Answer 4

替换

$("#id").html($("#id").next(".tooltipMessage").html());

带

$("#id").html($("#id").find(".tooltipMessage").html());

.next()不是在寻找DOM中的所有内容，它实际上是让下一个元素.find()适合你

编辑：

我想这很有效，我快速阅读了这个问题，并认为HTML看起来像这样

<div id="tooltip">
   <p>other element</p>
   <div class="tooltipMesage">Tooltip Message</div>
</div>

.find()适用于所有后代元素.siblings()如果您选择将HTML保持为问题中的方式，则可以正常工作

获取具有已定义类名的下一个元素的html内容

4 个答案: