Finding closest
to the clicked button

Question

$(document).ready(function()
{
    $('button').on('click', function()
    {            
        $('.container').children().eq(1).append($('p.important').text());
    });
});

<div class="container">
    <p>1</p>
    <p>2</p>

    <button>Lawl, a button.</button>

    <p>3</p>
    <p class="important">Text to be copied</p>
</div>

I want to find the closest upper p tag to my button. For example, if I move button under <p>1</p>, it should append values to it. If I move my button to bottom, it should add append values to <p>3</p>.

Is it possible with my current HTML?

I've tried closest() function. For some reason, it never returned me the closest p value. Even with closest('p') function lying aroung, it kept appending value to all p's. — Aristona, Sep 11 '12 at 12:32

score 2 · Accepted Answer · answered Sep 11 '12 at 12:35

You can use next or prev method.

.next( [selector] ): Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

.prev( [selector] ): Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

$('.container button').on('click', function(e) {
      e.preventDefault(); 
      var txt = $('p.important').text();
      $(this).next('p').append(txt);    
});

I've confused myself with closest() function. It sounds like it would obtain the closest target, but it finds the closest parent. I'll probably use next(), and doublecheck prev() incase button is at bottom. Thank you, it solved my question. — Aristona, Sep 11 '12 at 12:47

score 1 · Answer 2 · answered Sep 11 '12 at 12:26

1

Try closest method. It must do the trick!

$("button").click(function(){
    $(this).closest('p');
})

answered Sep 11 '12 at 12:26

Mathieu Mahé

2,647
3
35
50

This only traverses up the tree, not down. – KyorCode Sep 11 '12 at 12:27
`closest` selects the closest parent of the element _based on the selector_ – Ram Sep 11 '12 at 12:27
$(this).closest('p').text() returns null. – Aristona Sep 11 '12 at 12:39

score 0 · Answer 3 · answered Sep 11 '12 at 12:29

0

You can either use one of the following, depending on your needs:

answered Sep 11 '12 at 12:29

KyorCode

1,477
1
22
32

Finding closest
to the clicked button

3 Answers3

Linked

Finding closest to the clicked button

3 Answers3

Linked

Finding closest
to the clicked button