获得价值和最接近的锚标签的href？
[英]Getting value and href of closest anchor tag?
问题描述
我试图基于附近的按钮获取最接近的锚标签的值和href链接。 如您所见，这是锚标记和按钮的列表。 因此，在点击按钮时，希望定位到该特定锚标签。 我正在登录以查看名称和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>
2 个解决方案
解决方案1
2 2018-03-19 19:00:32
您需要首先使用.closest('li')将DOM遍历到列表项，然后使用.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>
解决方案2
1 已采纳 2018-03-19 18:59:47
closest的函数使用特定的选择器而不是同级来找到最接近的祖先/父元素。
在该标记中，您要选择的链接不是按钮的祖先/父项。
此外，必须修改此行：
var target = $('.show_field').closest('a');
对此：
+---- This is the current clicked button.
|
| +--- Gets the desired element 'a'
| |
v v
var target = $(this).closest('li').find('a');
^
|
+---- Finds the closest ancestor 'li'.
另一种方法是找到最接近的元素li ，然后找到元素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); }); });
<!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>
从锚点 (a) 标签获取本地 href 值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.