javascript - On button click, select a sibling element with JQuery - Stack Overflow

admin2025-04-03 0

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.

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>

Share Improve this question asked Dec 24, 2011 at 6:28 user619656 7992 gold badges10 silver badges18 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 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 :)

Haven't tried but this should work:

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

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/t8XJZ/ which might solve your problem.

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>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743618739a213635.html

javascriptOn button click

select a sibling element with JQueryStack Overflow

最新回复(0)