我正在尝试根据附近的按钮获取最近的 anchor 标记的值和 href 链接。正如您所看到的，这是 anchor 标记和按钮的列表。因此想要在单击按钮时定位特定的 anchor 标记。我正在记录以查看名称和 href，但显示为空且未定义。我做错了什么？
$(document).ready(function() {
$('.input_fields_wrap').on("click",".addlink-edit-icon",function (e) {
e.preventDefault();
var target = $('.show_field').closest('a');
var edit_name = target.text();
var edit_address = target.attr('href');
console.log('name', edit_name );
console.log('address', edit_address);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">
<div class="addlink_dynlist">
<li>
<a href="aaaaaaaaaaaa">aaaaaaaa</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
<li>
<a href="bbbb">bbbbbbbbbb</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
<li>
<a href="ccc">cccccccccc</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>最佳答案
需要先向上遍历 DOM 到列表项，用 .closest('li')然后使用 .find('a') 进入链接。本质上，只需更改:
var target = $('.show_field').closest('a');
至
var target = $(this).closest('li').find('a');
$(document).ready(function() {
$('.input_fields_wrap').on("click",".addlink-edit-icon",function (e) {
e.preventDefault();
var target = $(this).closest('li').find('a');
var edit_name = target.text();
var edit_address = target.attr('href');
console.log('name', edit_name );
console.log('address', edit_address);
});
});<div class="input_fields_wrap" style="overflow-y: hidden;">
<div class="addlink_dynlist">
<li>
<a href="aaaaaaaaaaaa">aaaaaaaa</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
<li>
<a href="bbbb">bbbbbbbbbb</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
<li>
<a href="ccc">cccccccccc</a>
<span class="show_field">
<button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>
</span>
</li>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>关于javascript - 获取最近的 anchor 标记的值和href？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49370433/