1

我正在迭代一些 jQuery 供其他人使用。

然而，为了让它工作，我希望向上然后向下遍历 dom 树。这是为了让效果保持在包装 div 内，而不是影响整个页面。（我假设同一个 'wrappingdivclass' 及其内容的多次迭代）

<div class="wrappingdivclass" >
  <h4>series name</h4>
     <div class="hoverheaders">
         <p class="hoverheading"><!-- TEXT HERE (FOR INITIAL IMAGE) !-->image</p>
         <p class="hoverheading1"><!-- IMAGE TWO TEXT !-->image</p>
         <p class="hoverheading2"><!-- IMAGE THREE TEXT !-->image</p>
        <p class="hoverheading3"><!-- IMAGE FOUR TEXT !-->image</p>    
     </div>
     <div class="hovercontents">
          <p class="hovercontent">athing</p>
          <p class="hovercontent1">athing</p>
          <p class="hovercontent2">athing</p>
          <p class="hovercontent3">athing</p>
      </div>
</div>

和 jquery（位于外部文件中）这些迭代用于 hoverheading1-3 和 hovercontent1-3

例子：

//does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent").show();
  jQuery(".hoverheading").hover(function()
  {
    $(this).parent().children(".hovercontent").show()
    $(this).parent().children(".hovercontent").siblings().hide();
  });
});
//      $(".hovercontent2").siblings().hide();
  });
});

示例 2：

//also does not work
jQuery(document).ready(function() {
  jQuery(".hovercontent1").hide();
  //toggle the componenet with class msg_body
  jQuery(".hoverheading1").hover(function()
   {
    jQuery(this).closest(".hovercontent1").show();
    jQuery(this).closest(".hovercontent1").siblings().hide();
  });
});
4

1 回答 1

1

你应该保持一致.....要么使用 $ 要么使用 JQuery。你应该避免混合它们......你也可以从使用后代选择器中受益。

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

//选择父元素为“hovercontents”的类“hovercontent2”的元素，其父元素为“wrappingdivclass”

$(".wrappingdivclass .hovercontent2")

//选择类“hovercontent2”的元素，它们是“wrappingdivclass”的间接后代。间接意味着它不必是直接孩子......它可能是孙子，等等......

于 2012-12-12T16:42:40.937 回答