Question

我有几个

的实例

(".wrappingdivclass > .hovercontents > .hovercontent2")

页面上的

..所有需要独立行为但调用相同的jquery。正如你可以看到它的两个相同的HTML块......

我如何在dom树上上下移动以保持悬停/ showhide只包含wrapclass div中的内容，而不会影响下一个wrapclass div的所有内容。

<div class="wrappingclass" id="notthesecondone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff</p>
     <p class="hoverheading1">on hover display stuff1</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>
    <div class="wrappingclass" id="notthefirstone">
 <div class="hoverheaders">
     <p class="hoverheading">on hover display stuff/hide stuff1</p>
     <p class="hoverheading1">on hover display stuff1/hidestuff</p>
     <!-- iterate, as needed !-->
    </div>
     <div class="hovercontents">
      <p class="hovercontent">stuff</p>
      <p class="hovercontent1">stuff1</p>
              <!-- iterate, as needed !-->
  </div>

这是jquery：

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading").hover(function()
  {
     jQuery(this).parent().children(".hovercontent").show()
    jQuery(this).parent().children(".hovercontent").siblings().hide();
  });
});

Answer 1

尝试替换

jQuery(this).parent().children(".hovercontent").show()
jQuery(this).parent().children(".hovercontent").siblings().hide();

与

jQuery('.hovercontent').hide();
jQuery(this).closest('.hovercontent').show

修改

将hover替换为mouseover

最终编辑，

它真的像这样..（在DOM内部就绪）

$("p[class^=hovercontent]").hide();
//toggle the componenet with class msg_body
$("p[class^=hoverheading]").mouseover(function() {
    $("p[class^=hovercontent]").hide();
    $(this).closest('.hoverheaders').next().find('p').eq($(this).index()).show();
});

演示 - http://jsfiddle.net/68UVj/

通过父/子进行jquery dom遍历

1 个答案:

修改

最终编辑，