迭代 dom 树遍历

Question

我正在迭代jQuery的一小部分供其他人使用。

但是，为了使它起作用，我希望向上然后向下遍历dom树。这样效果就会保留在换行div 内，而不是影响整个页面。（我假设同一个"包装divclass"及其内容的多次迭代）

<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（存在于外部文件中）这些迭代用于悬停标题 1-3 和悬停内容 1-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();
  });
});

Answer 1

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

$（".wrappingdivclass> .hovercontent> .hovercontent2"）

选择类 "hovercontent2" 的元素，这些元素的父元素是 "hovercontent"，其父元素是 "wrappingdivclass"

$（".wrappingdivclass .hovercontent2"）

选择类 "hovercontent2" 的元素，这些元素是 "wrappingdivclass" 的间接后代。间接意味着它不一定是直接的孩子。可能是孙子等等。