Question

我想获得下一个p标签的ID。

HTML：

 <h1>
    <span class=" edit">
    <a><i class="fa fa-edit"></i></a>
    <a id="remove"><i class="fa fa-trash-o"></i></a>
    </span>
</h1>
<p class="getty" id="1" href="#">One</p>

jQuery的：

$('span.edit > a').click(function(e) {
    e.preventDefault();
    var x = $(this).next("p").attr('id');
    alert(x);

});

它没有提供任何警报。我在哪里做错了？

Answer 1

p元素是单击锚点最近的父h1元素的下一个兄弟。您需要遍历父h1元素，然后使用.next()选择器来定位它：

$(function(){
$('span.edit > a').click(function(e) {
 e.preventDefault();
 var x = $(this).closest('h1').next("p").attr('id');;
 alert(x);
});});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>
<span class=" edit">
<a><i class="fa fa-edit"></i></a>
<a id="remove"><i class="fa fa-trash-o"></i>abc</a>
</span>
</h1>
<p class="getty" id="1" href="#">One</p>

Answer 2

p是被点击的a的父亲的下一个，.closest会转到最近的父级水疗中心 n标记。

$(this).closest("h1").next("p")[0].id;

$(function() {
  $('span.edit > a').click(function(e) {
    e.preventDefault();
    var x = $(this).parent("span").next("p")[0].id;
    alert(x);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class=" edit">
<a><i class="fa fa-edit"></i></a>
<a id="remove"><i class="fa fa-trash-o"></i>ICON</a>
</span>
<p class="getty" id="1" href="#">One</p>

Answer 3

在这里，我使用了closest来获取h1代码，然后获取了旁边的<p>代码。然后抓住它的id

＆＃13;

$('span.edit > a').click(function(e) {
    e.preventDefault();
    var x = $(this).closest("h1").next("p").attr('id');
    alert(x);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <h1>
    <span class=" edit">
    <a><i class="fa fa-edit"></i></a>
    <a id="remove"><i class="fa fa-trash-o"></i>Click Me</a>
    </span>
</h1>
<p class="getty" id="1" href="#">One</p>

＆＃13;

如何获取下一个p元素的id？

3 个答案: