How do I find an element before a clicked on link?

Question

If I have code like this:

<div class="container">
  <span class="pID">12342123</span>
  <a href="#" class="but">click here</a>
</div>

<div class="container">
  <span class="pID">98765432</span>
  <a href="#" class="but">click here</a>
</div>

<div class="container">
  <span class="pID">2342342</span>
  <a href="#" class="but">click here</a>
</div>

How do I make it so if the link is clicked on, go to the pID and grab the # within the a's own container?

$('.but').on('click',function(){
   var pID = $(this).parent('pID').text(); ?
});

For your information, I don't have any control of putting the PID in the anchor.

You can also use `.prev()`. – Bill Criswell Nov 01 '13 at 18:08 — Bill Criswell, Nov 01 '13 at 18:08

score 1 · Answer 1 · answered Nov 01 '13 at 17:45

1

You were close. The element is a sibling, not a parent.

$(this).siblings('.pID').text();

answered Nov 01 '13 at 17:45

James Montagne

77,516
14
110
130

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

$('.but').on('click',function(){
   var pID = $(this).siblings('.pID').html();
});

Some considerations on whether to use .text() or .html():

What is the difference between jQuery: text() and html() ?

If using as a callable function called as onClick="doThis(this);":

function doThis(el) {
    var pID = $(el).siblings('.pID').html();
}

edited May 23 '17 at 10:25

Community

1
1

answered Nov 01 '13 at 17:45

Code Monkey

643
6
18

I'm a dope... put the onclick in the wrong element. Thanks Mate! – Damien Nov 01 '13 at 18:09

score 0 · Answer 3 · answered Nov 01 '13 at 18:01

0

try this:

$('.but').on('click',function(){
  var pID = this.parentElement.children[0].textContent
});

assumes the html structure does not change (e.g. children[0] is always the span you are looking for

answered Nov 01 '13 at 18:01

toms

1,760
1
16
17

How do I find an element before a clicked on link?

3 Answers3