1

我有 jQuery 的问题。如果我有此代码来填充工具提示 div：

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

这行得通，代码使用 classname 获取下一个元素tooltipMessage并使用 id 填充元素tooltip。

但如果我有这个代码：

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

undefined被退回。

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

4

4 回答 4

0

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

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

于 2012-10-21T04:51:43.607 回答
0

我之前通过确保工具提示消息的 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>

那么无论消息相距多远，它总能找到合适的消息来绑定

于 2012-12-29T17:40:08.003 回答
-1 
.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>

编辑 所以你需要使用 next 两次才能找到它..

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

或者

使用.nextAll()

$("#id").html($("#id").nextAll(".tooltipMessage").first().html());
于 2012-10-21T04:46:09.147 回答
-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 保持在问题中的方式，则适用于所有 decendent 元素

于 2012-10-21T04:25:45.170 回答