Question

在标记中，我有几个具有相同id的div，在这些div中有段落和按钮。现在，当单击一个按钮时，我想在与该特定按钮相同的div下获取相应段落标记的值。我怎么能用jQuery做到这一点？标记如下：

<div class="col-sm-5 narrow">
    <p id="title">Jhon123</p>
    <p id="text">This is the status of jhon</p>
    <p>posted at 12:30pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default" id="repost">Re-Tweet</button>

    </form>
</div>

当点击id为#repost的按钮时，我想访问带有id #text的p标签内的html。我试过这样的事情：

$('#retweet').click(function(e){
    e.stopPropagation();
    var text = $(this).parent("div").closest('#text');
    alert("some retweet button has been pressed which has the text:"+text);
});

Answer 1

您可以使用jQuery .closest()函数获取包含<div>的内容，然后在其中找到您想要的<p>标记：

$('#repost').on('click', function () {
    var text = $(this).closest('div[class^=col]').find('#text').html();
    console.log(text);
});

div[class^=col]选择器表示＆＃34;找到距离div＆＃34;开头的类最近的col标记。这允许您使用其他引导列类并使其仍然有效。

Answer 2

$('#repost').click(function(){
    console.log($(this).closest('div').find('#text').html());
  });

请参阅演示http://jsbin.com/wojupoyosa/1/edit?html,js,console,output

并且评论建议您每页的ID应该是唯一的，因此您应该使用类或其他内容。

Answer 3

$( "#text" ).text()将为您提供P标记内的值。所以你的代码看起来像是：

$('#repost').click(function(){
   $( "#text" ).text() // save it to wherever you want
});

Answer 4

作为旁注，通常不赞成使css id不是唯一的 - 共享标识符应该使用类。

Answer 5

如果您将所有id更改为类，如下面的演示所示，那么以下代码应该可以正常工作。此外，您不需要表单元素。

$('.repost').click(function(){
    var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});

＆＃13;

$(function() {
    $('.repost').click(function(){
        var text = $(this).closest('div').find('.text').text();
    alert("some retweet button has been pressed which has the text: " + text);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
    <p class="title">Jhon123</p>
    <p class="text">This is the status of jhon</p>
    <p>posted at 12:30pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default repost">Re-Tweet</button>
    </form>
</div>
<div class="col-sm-5 narrow">
    <p class="title">Mary123</p>
    <p class="text">This is the status of mary</p>
    <p>posted at 12:35pm GMT6+</p>
    <form class="form-inline">
        <input type="text" class="form-control reply" placeholder="Type and enter to reply">
        <button type="button"  class="btn btn-default repost">Re-Tweet</button>
    </form>
</div>

＆＃13;

使用jQuery获取特定div中特定元素的值

5 个答案: