為什么我無法使用jquery contents（）查找我的dom？

Question

我想給我的表自定義工具提示。因此，我給每個td一個名為trigger1的類。每個td都有一個自定義工具提示內容，它是默認的hide。現在我添加了mouseover和mouseout事件，但發現它不起作用。的contents()和它的工作好聽，誰能告訴我原因嗎？什么時候應該使用contents()

 $(function(){
 $(".trigger1").each(function () { 
        $(this).on('mouseover', function () { 
  //not work: $(this).contents().find(".tooltipcontent").show();            
  $(this).find(".tooltipcontent").show(); 
        });
        $(this).on('mouseout', function () {
             /*not work: $(this).contents().find(".tooltipcontent").hide(); */
            $(this).find(".tooltipcontent").hide(); 
        });
    }); 
});

每個td內容都是這樣的：

  <td align="center" class="trigger1">
   <a target="_blank" href="#">1234511</a> 
   <div class="tooltipcontent" style="display: none;">
      some content
      <a  target="_blank" href="#">more</a>
   </div>
</td>

Answer 1

按照jQuery的.contents（）的文檔之間的差異.contents()和.children()是.contents()也返回文本和注釋元素，絕大多數的jQuery的方法不支持。

幾乎可以肯定您對它的使用感到困惑。 更換你的情況.contents()用.children()將你的願望，這樣的方式工作：

$(this).children('.tooltipcontent').hide(); 

Answer 2

我認為您可以使用.hover（）方法是一種更好的方法。

這是一個示例： https : //jsfiddle.net/fgma3bt6/

jQuery(document).ready(function($) {
    $('.trigger1').hover(function() {
        $(this).find('.tooltipcontent').show();
    }, function() {
        $(this).find('.tooltipcontent').hide();
    });
});

Answer 3

$（this）.contents（）將返回一個子節點數組，包括文本和注釋節點。 您將無法直接找到類tooltipcontent。 更改

$(this).contents().find(".tooltipcontent")

至

$(this).children('.tooltipcontent') or $(this).find(".tooltipcontent")

使它工作。

Answer 4

這可能與問題無關。

您不必對此使用jquery，可以使用css達到相同的效果。 嘗試這個：

CSS：

 .trigger1:hover .tooltipcontent{ display: block )