Question

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

Answer 1

您需要首先使用.closest('li')将DOM遍历到列表项，然后使用.find('a')将其遍历到链接。基本上，只需改变：

var target = $('.show_field').closest('a');

到

var target = $(this).closest('li').find('a');

＆＃13;

$(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);

    });
});

＆＃13;

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

＆＃13;

Answer 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>

获得最接近锚标记的值和href？

2 个答案: