Question

想知道如果有人能指出正确的方向，我试图展示下一个＆＃39;页面上具有匹配类名的元素，即直接位于链接下方的元素。

＆＃13;

$(function() {
  $("div.std-centered").hide();
  $("a.show_hide").click(function(e) {
    e.preventDefault();
    $(this).closest('div.std-centered').next().show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-sm-4 col sameHeight">
    <p>Some blurb <a href="#" class="show_hide">i</a></p>
  </div>
  <div class="col-sm-2 col text-center sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
</div>

<div class="row">
  <div class="col-sm-12 std-centered">
    <p>This is the content</p>
  </div>
</div>

＆＃13;

隐藏了std-centered类的div（在jQuery中），并且我在点击show_hide链接时尝试查找并显示它。

但我似乎无法处理该div。有人能指出我正确的方向吗？

谢谢， ç

Answer 1

问题是因为closest()搜索DOM以查找父元素，但.std-centered div是父节点的兄弟，因此无法找到。

要解决此问题，您可以使用closest()来查找.row，然后使用next('.row')，最后使用find()来获取您想要的元素，如下所示：

$(function() {
  $("div.std-centered").hide();
  
  $("a.show_hide").click(function(e) {
    e.preventDefault();
    $(this).closest('.row').next('.row').find('div.std-centered').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-sm-4 col sameHeight">
    <p>Some blurb <a href="#" class="show_hide">i</a></p>
  </div>
  <div class="col-sm-2 col text-center sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
</div>

<div class="row">
  <div class="col-sm-12 std-centered">
    <p>This is the content</p>
  </div>
</div>

Answer 2

使用此选择器$(this).closest('div.row').next(".row").find('.std-centered').show();
Closest() - ＆gt;找到具有指定参数的第一个父

$(function() {
  $("div.std-centered").hide();
  $("a.show_hide").click(function(e) {
    e.preventDefault();
    $(this).closest('div.row').next(".row").find('.std-centered').show();// since element std-centered is found in row tthat is next to row that is closest to show_hide
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-4 col sameHeight">
    <p>Some blurb <a href="#" class="show_hide">click</a></p>
  </div>
  <div class="col-sm-2 col text-center sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
  <div class="col-sm-2 text-center col sameHeight">
    <p><span class="glyphicon glyphicon-ok"> </span></p>
  </div>
</div>
<div class="row">
  <div class="col-sm-12 std-centered">
    <p>This is the content</p>
  </div>
</div>

显示＆＃39;最近＆＃39; DIV

2 个答案: