jQuery filter() 和 closest()

Question

我正在尝试学习如何使用 jQuery 的 closest() 和 filter() 方法。 closest() 向上遍历 DOM 树，而 filter() 向下遍历。

在下面的代码中，当用户点击 link 后，jQuery 应该向上搜索 DOM 直到找到 "row" class，向下搜索，直到找到 "test" class 然后 return 该元素中的文本。为什么控制台日志打印空白而不是 "Hello?"

$('.button').on('click', function(e) {
 console.log( $(this).closest('.row').filter('.test').text() );
 e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="row">
   <td><span class="test">Hello</span>
    <table>
     <tr>
      <td><a class="button" href="#">Button 1</a></td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

Answer 1

所以基本上你误解了 filter() 的作用。根据您所说的，您应该改用 find()。

HTML

<table>
  <tr class="row">
    <td><span class="test">Hello</span>
      <table>
        <tr>
          <td><a class="button" href="#">Button 1</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

jQuery

$(document).ready(function() {
  $('.button').on('click', function(e) {
    console.log($(this).closest('.row').find('.test').text());
    e.preventDefault();
  });
});

Fiddle给你玩玩

编辑：

澄清一下 filter() 的作用：

Reduce the set of matched elements to those that match the selector or pass the function's test.

所以在您的原始代码中 - 您的匹配元素是 .row 元素。您正在尝试将其减少为 test 作为 class 的元素。

Answer 2

你混淆了 filter() 和 find()

filter()

Reduce the set of matched elements to those that match the selector

这不会 return 任何东西，因为 closest('.row') 不包含具有 .test

的元素

find()

Get the descendants of each element in the current set of matched elements

从 return 由 closest('.row')

编辑的元素开始向下搜索 DOM .test

$('.button').on('click', function(e) {
  console.log($(this).closest('.row').find('.test').text());
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="row">
    <td><span class="test">Hello</span>
      <table>
        <tr>
          <td><a class="button" href="#">Button 1</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

当你真的想使用 filter() 而不是 find() 时，你可以这样做：

$('.button').on('click', function(e) {
var text;
 $(this).closest('.row').filter(function(){
   text = $( ".test", this ).text();
   return $( ".test", this ).length === 1;
  });
  console.log(text);
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="row">
    <td><span class="test">Hello</span>
      <table>
        <tr>
          <td><a class="button" href="#">Button 1</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

但我不推荐这样做，因为它违背了为此设置专用功能的目的。

jQuery filter() 和 closest()

jQuery filter() and closest()

jquery

filter

closest

HTML

jQuery

编辑：