Question

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

然而，为了让这个工作，我希望能够遍历然后沿着dom树走下去。这样效果会保留在包装div中，而不会影响整个页面。（我假设同一'wrappeddivclass'及其内容的多次迭代）

<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();
  });
});

Answer 1

你应该保持一致.....使用$或使用JQuery。你应该避免混合它们.... 您也可以使用后代选择器。

$（“。wrappingdivclass＆gt; .hovercontents＆gt; .hovercontent2”）

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

$（“。wrappingdivclass .hovercontent2”）

//选择“hovercontent2”类的elementss，它们是“wrappingdivclass”的间接后代。间接意味着它不一定是直接的孩子......它可能是大孩子......等等。

迭代dom树遍历

1 个答案: