Question

例如：

  <h1 class="title">This is a title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">This is a totally different title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">and this is another title still</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

我希望拥有它，以便当用户点击按钮时，相应的标题会向下滑动。

到目前为止，我已经尝试了类似的东西（尽管我还尝试了另外的最近（），父（），兄弟（）等组合：

$("button").click(function(){
  var currentTitle = $(this).????(".title").text();
  $("playerTitleNormallyHidden").slideDown(500).delay(2000).slideUp(500);
});

我确定这可能非常简单，但我被卡住了。

Answer 1

您可以使用prevAll()

$("button").click(function(){
  var currentTitle = $(this).prevAll(".title").text();
  $("playerTitleNormallyHidden").slideDown(500).delay(2000).slideUp(500);
});

prevAll()将

获取匹配集中每个元素的所有前兄弟节点元素，可选择由选择器过滤。

<强>更新

由于您在text()之后立即使用prevAll，因此您需要限制所需的先前兄弟。否则，您的输出将来自 ALL 以前的.title元素。

这可以通过使用:first修改我们的选择器来避免，这将使我们获得离按钮最远的第一个元素

var currentTitle = $(this).prevAll(".title:first").text();

Answer 2

您可以使用div包裹您的手风琴琴体并向下滑动。

<强> HTML

<h1 class="title">This is a title</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>
 <h1 class="title">This is a totally different title</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>
 <h1 class="title">and this is another title still</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>

<强> jquery的

$(document).ready(function () {
    $('div').hide();

    $('h1').on('click', function () {
        $(this).next().slideDown();
        $('div').not($(this).next()).slideUp();
    });

});

这是 DEMO

Answer 3

您认为可以使用prevAll(".title")，但这会选择 all 当前元素上方的标题，而不是最接近的标题。

相反，您可以使用prevUntil()向上移动兄弟姐妹，直到您到达第一个.title，然后通过再添加一个标记来获取所需的元素。

＆＃13;

$("button").click(function(){
  // var currentTitle = $(this).????(".title").text();
  var currentTitle = $(this).prevUntil(".title").last().prev();

  // Do something with the title
  currentTitle.attr("style","background-color:red");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="title">This is a title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">This is a totally different title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">and this is another title still</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

＆＃13;

使用不是直接兄弟，父母等的jquery获取前一个元素

3 个答案: