获取最近锚标签的价值和href？答案

【问题标题】：Getting value and href of closest anchor tag?获取最近锚标签的价值和href？
【发布时间】：2018-08-28 10:53:36
【问题描述】：

我正在尝试根据附近的按钮获取最近锚标记的值和 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>

【问题讨论】：

您不能针对您的情况使用.closest() 吗？ api.jquery.com/closest
我认为你误解了closest。它得到最近的祖先。这就是您用来获取 show_field 元素的内容（例如，$(this).closest('.show_field')。
@MikeMcCaughan，感谢您的澄清。

标签： javascript jquery html

【解决方案1】：

您需要先使用.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】：

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

【讨论】：

非常感谢，理解最接近（）是问题