On button click, select a sibling element with JQuery

Question

I have this code:

<div class="item">
  <div class="hidden">44</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnAddCommentForAnswer').click(function () {
            alert(XXX);
        });

    });
  </script>    
</div>

<div class="item">
  <div class="hidden">12</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnAddCommentForAnswer').click(function () {
            alert(XXX)
        });

    });
  </script>  
</div>

what code should I put at XXX to get the content of the div with class=hidden when i press the button at the same div with class=item?
If you click the first button you should get 44, and for clicking the second button you get 12.

drfranks3 · Accepted Answer · 2018-07-23 10:02:54Z

8

id's are meant to be unique; you may wish to consider changing the id to a class. With that in place, you could use a script like the following to achieve what you want:

$(document).ready(function() {
    $('.btnAddCommentForAnswer').click(function() {
        alert($(this).siblings('.hidden').text());
    });
});

Here's a JSFiddle example: JSFiddle

Also, you don't need to have two script tags in your script! This one script wrapped in <script> tags is all that is necessary :)

edited Jul 23, 2018 at 10:02

answered Dec 24, 2011 at 6:37

drfranks3

6658 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eran · Accepted Answer · 2014-01-15 23:20:41Z

1

Haven't tried but this should work:

$(this).closest('div').text()

edited Jan 15, 2014 at 23:20

Eran

395k57 gold badges726 silver badges793 bronze badges

answered Dec 24, 2011 at 6:37

user424134

5322 gold badges5 silver badges17 bronze badges

Comments

Virendra · Accepted Answer · 2011-12-24 06:39:57Z

0

You need not repeat the javascript code multiple times. Also, you cannot use id in jquery as the buttons have same id. Here is the jsfiddle http://jsfiddle.net/t8XJZ/ which might solve your problem.

answered Dec 24, 2011 at 6:39

Virendra

2,5433 gold badges23 silver badges39 bronze badges

Comments

Salt Hareket · Accepted Answer · 2011-12-24 06:43:34Z

0

maybe this is more useful for you...

jquery:

$(document).ready(function () {
     $('.item').each(function(){
         $(this).find("#btnAddCommentForAnswer").click(function () {
            alert($(this).prev(".hidden").text())
        });
    });
 });

html:

<div class="item">
  <div class="hidden">44</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />  
</div>

<div class="item">
  <div class="hidden">12</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>

answered Dec 24, 2011 at 6:43

Salt Hareket

7547 silver badges18 bronze badges

Collectives™ on Stack Overflow

On button click, select a sibling element with JQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related