Get a previous element with jquery that is not a direct sibling, parent, etc

Question

For example:

  <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>

What I would like is to have it so that when the user clicks a button, the corresponding title slides down.

So far, I've tried something like (though I've also tried different combos of closest(), parent(), sibling(), etc):

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

I'm sure this is probably super easy, but I am stuck.

AmmarCSE · Answer 1 · 2015-05-24T03:07:13.917

2

You can use prevAll()

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

prevAll() will

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

Update

Since you are using text() immediately after prevAll, you will want to limit which previous sibling you want. Otherwise, your output will be text from ALL the previous .title elements.

This can be avoided by modifying our selector using :first which will get us the first element furthest away from the button

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

edited May 24 '15 at 03:07

answered May 24 '15 at 02:49

AmmarCSE

30,079
5
45
53

1

`prevAll(...).first()` otherwise you are selecting all of the previous .title elements and text() will combine them all – Patrick Evans May 24 '15 at 02:55
@PatrickEvans, very good point. My question is, if you are the fourth button and you do prevAll('.title:first') which .title will it get? The first or the third? – AmmarCSE May 24 '15 at 02:59
You will get the third, the elements are arranged closest to furthest, documentation states: ***" the elements are returned in order beginning with the closest sibling."*** – Patrick Evans May 24 '15 at 03:01

score 0 · Answer 2 · answered May 24 '15 at 03:00

You could wrap your accordion body with a div and slide Down it.

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

});

Here is a DEMO

Drakes · Answer 3 · 2015-05-24T03:22:37.397

You'd think you could use prevAll(".title"), but that will select all the titles above the current element, not the closest one.

Instead, you can use prevUntil() to move up the siblings until you reach the first .title, then get the desired element by going one more tag up.

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

<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>

Get a previous element with jquery that is not a direct sibling, parent, etc

3 Answers3