点击按钮时，使用JQuery选择兄弟元素。

Question

我有这段代码：

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

当我点击class为item的div中的按钮时，需要在XXX处放置什么代码才能获取class为hidden的div的内容？
如果您点击第一个按钮，您应该会得到44，而对于点击第二个按钮，您会得到12。

- user619656

Answer 1

id应该是唯一的；你可能需要考虑将id更改为class。 这样，您可以使用以下脚本来实现您想要的效果：

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

这是一个JSFiddle示例：JSFiddle。

另外，您的脚本中不需要有两个

- drfranks3

Answer 2

还没有尝试过，但这应该可以正常运行：

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

- user424134

Answer 3

你不需要多次重复JavaScript代码。此外，你不能在jQuery中使用id，因为按钮具有相同的id。 这里是一个可能解决你问题的jsfiddle链接http://jsfiddle.net/t8XJZ/。

- Virendra

Answer 4

也许这对你更有用...

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>

- Salt Hareket