Question

我有这些结构：

<div class="brand">
  <img src="img/logo.png" alt="" />
  <h4>Marca</h4>
  <p><span>+</span>licenses</p>
</div><!-- /.brand -->

<div class="license-details">
  <div class="collection-details">
    <h4>Wow</h4>
    <hr />
    <ul>
      <li>Collection</li>
      <li>Collection</li>
      <li>Collection</li>
    </ul>
  </div>
  <div class="collection-details">
    <h4>yay</h4>
    <hr />
    <ul>
      <li>Collection</li>
      <li>Collection</li>
      <li>Collection</li>
    </ul>
  </div>
  <div class="collection-details">
    <h4>yep</h4>
    <hr />
    <ul>
      <li>Collection</li>
      <li>Collection</li>
      <li>Collection</li>
    </ul>
  </div>
</div>

重复n次。我想用jQuery来定位.brand div的p标签并显示相对的.license-details div。

$(".brand p").on("click", function() {
  $(".license-details").fadeToggle(300);
});

这显示了每个.license-details div，但我想只显示下一个.license-details div。

我试过了：

$(".brand p").on("click", function() {
  $(this).next(".license-details").fadeToggle(300);
});

但它没有用。

Answer 1

在使用next()，

之前，您需要进入父元素

$(".brand p").on("click", function() {
    $(this).closest(".brand").next(".license-details").fadeToggle(300);
});

Answer 2

试试这个：使用closest()获取父品牌div，然后使用next()获取license-details div

$(".brand p").on("click", function() {
  $(this).closest('.brand').next(".license-details").fadeToggle(300);
});

Answer 3

您使用错误的选择器来定位.license-details元素。 .license-details是p元素父母的兄弟。使用方法：

$(".brand p").on("click", function() {
  $(this).parent().next(".license-details").fadeToggle(300);
});

Answer 4

请检查jsfiddle

$(".brand p").on("click", function() {
  $(this).parent().next().fadeToggle(300);
});

遍历DOM的jquery方法

4 个答案: