jQuery 过滤器() 和最接近的()

Question

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

在下面的代码中，用户单击链接后，jQuery 应该向上搜索 DOM 直到找到“row”类，向下搜索直到找到“test”类，然后返回该元素中的文本。为什么控制台日志打印为空白而不是“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 作为类的元素。