jQuery filter（）和nearest（）

Question

我试图学习如何使用jQuery的nearest（）和filter（）方法。 nearest（）遍历DOM树，而filter（）遍历。

在下面的代码中，在用户单击链接之后，jQuery应该搜索DOM，直到它找到＆＃34; row＆＃34;上课，向下搜索，直到找到＆＃34; test＆＃34; class然后返回该元素中的文本。为什么控制台日志打印空白而不是＆＃34;您好？＆＃34;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

所以基本上你误解了$(PRODUCT_BUNDLE_IDENTIFIER)的作用。根据您的意见，您应该使用filter()代替。

HTML

find()

的jQuery

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

Fiddle让你玩。

编辑：

在此澄清$(document).ready(function() { $('.button').on('click', function(e) { console.log($(this).closest('.row').find('.test').text()); e.preventDefault(); }); }); 的作用：

  

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

所以在原始代码中 - 匹配的元素是filter()元素。您正在尝试将其减少为具有.row作为类的元素。

Answer 2

您正在混淆filter()和find()

filter()

  

将匹配元素集减少到与选择器匹配的元素

这不会返回任何内容，因为closest('.row')不包含.test

的元素

<强> find()

  

获取当前匹配元素集中每个元素的后代

从.test

返回的元素开始搜索DOM closest('.row')

$('.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>

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