Question

我有一些动态生成的HTML代码：

<div id="slider-7238" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Custom Pizza<br />
        Left: Mushrooms / Green Peppers<br/>Right: Cheese<span class="slide-more" id="slide-more-7238"> MORE... </span>
            <div class="slide-full-desc" id="slide-desc-7238">Left: Mushrooms / Green Peppers<br/>Right: Ultimate Cheese</div>                           
    </div>
</div>

<div id="slider-3471" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Chicken Alfredo<br />
        Grilled chicken breast strips and rotini pasta oven-baked<span class="slide-more" id="slide-more-3471"> MORE... </span>
            <div class="slide-full-desc" id="slide-desc-3471">Grilled chicken breast strips and rotini pasta oven-baked in a creamy Alfredo sauce with a layer of melted cheese. Served with an order of breadsticks.</div>                                    
    </div>
</div>

<div id="slider-7261" class="hps-slide" style="width:250px; height:50px;">
    <div class="hps-sliderText">
        Custom Pizza<br />
        Left: Ham<br/>Right: Cheese
    </div>
</div>

可以有任意数量的这些块，并且从不知道与它们相关联的id号。我有一个javascript函数，它采用slide-more跨度并将它们转换为鼠标悬停工具提示，slide-full-desc div的内容作为工具提示内容。如果我在div ID中使用硬编码，该函数可以正常工作，但由于动态生成，我不能这样做。我试图在.each函数中使用它，但似乎无法使选择器正确。我没有收到任何错误;它不是全部都在工作。

以下是代码：

 $(document).ready( function() {
        $('span.slide-more').each(function (i) {
            new QoTooltip($(this), $('slide-full-desc').html(), {'layout':'top'});
        });
    });

QoTooltip的参数是鼠标悬停的元素，包含工具提示内容的元素，以及一些设置（在这种情况下，只是布局。）

我需要的是让函数为每个跨度应用一个新的QoTooltip并传入相关的slide-full-desc div的内容。它们通过附加到其ID的四位数相关联（即span id="slide-more-3471"需要获取slide-desc-3471 div的html。

鼠标悬停工作，所以至少在跨度上获得.each，但我不确定如何将正确的内容放到第二个参数中。

Answer 1

尝试这样

$('span.slide-more').each(function (i) {
    new QoTooltip($(this), $(this).next('.slide-full-desc').html(), {'layout':'top'});
});

Answer 2

试试这个

$(this).next('.slide-full-desc').html();

完整代码

$(document).ready( function() {
      $('span.slide-more').each(function (i) {
          var $this = $(this);
          new QoTooltip($this, $this.next('.slide-full-desc').html()
                                                             , {'layout':'top'});
      });
 });

无法确定在.each函数中使用哪些选择器

2 个答案: