jquery - jQuery包含：与长度函数完全相等

Question

我正在从一些文本创建一个变量：

var foo = $(this).text();

...然后如果找到这个确切的文本，我想执行一个操作：

if ($("table td:contains(" + foo + ")").length) {
   console.log('text found');
}

但是，将变量 foo 分配为：

测试文本 1

或者

测试文本 2

...将以相同的方式触发该功能，因为它们都共享“测试文本”。

我在其他地方找到了这个解决方案：

$('span').filter(function() {
    return $(this).text() === text;
});

哪个显然与确切的文本匹配，但是我不确定如何将它与我现有的 if 语句/ .length 函数合并？

编辑：代码和上下文的完整演示（包括 **@CertainPerformance答案 - 仍然存在重复问题）：**

$( "a.product-title" ).each(function() {
	const text = $(this).text();
	const spanExists = Array.prototype.some.call(
  	$('table td'),
  	td => $(td).text() === text
	);
	if (spanExists) {
 		console.log('text found');
 		var associatedPrice = $("table td:contains(" + text + ")").next('td').text();
    console.log(text);
    $(this).closest('.simple-product-tile')
						.find(".lbl-price")
						.replaceWith(associatedPrice);
	}
});

table {background: red; color: white;}
.simple-product-tile {padding: 10px;}
.product-title {background-color: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-product-tile">
  <a class="product-title">unique</a>
  <span class="lbl-price">Loading...</span>
</div>
<div class="simple-product-tile">
  <a class="product-title">foo</a>
  <span class="lbl-price">Loading...</span>
</div>
<div class="simple-product-tile">
  <a class="product-title">foo 2</a>
  <span class="lbl-price">Loading...</span>
</div>
<br><br>
<table>
  <tr>
    <td>unique</td>
    <td>1.99</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>1.99</td>
  </tr>
  <tr>
    <td>foo 2</td>
    <td>2.99</td>
  </tr>
</table>

JS 小提琴：https ://jsfiddle.net/nym689fe/

标签： jquery

Answer 1

检查.length生成的 jQuery 集合的：

const len = $('table td').filter(function() {
    return $(this).text() === text;
}).length;
if (len > 0) {
  console.log('text found');
}

但是使用类似的东西可能更合适some，一旦找到匹配项（如果有）就会返回：

const text = 'foo';
const spanExists = Array.prototype.some.call(
  $('table td'),
  td => $(td).text() === text
);
if (spanExists) {
  console.log('text found');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>foo</td>
  </tr>
</table>

关于您的编辑，问题在于您的"table td:contains(" + text + ")"选择器匹配多个元素。例如， when textis foo，第二个tr中的 td 和第三个中的 tdtr都在匹配，因为两者都包含foo。然后，随着.text()，两个价格相关tds 的文本被放入associatedPrice：

获取匹配元素集中每个元素的组合文本内容

因为您不仅需要检查td具有确切文本的 a 是否存在，而且还想确定td它是哪个，所以可以使用Array.prototype.find而不是Array.prototype.some-.find将返回找到的元素（如果有），而不仅仅是返回一个布尔值。

$("a.product-title").each(function() {
  const text = $(this).text();
  const td = Array.prototype.find.call(
    $('table td'),
    td => $(td).text() === text
  );
  if (td) {
    var associatedPrice = $(td).next('td').text();
    $(this).closest('.simple-product-tile')
      .find(".lbl-price")
      .replaceWith(associatedPrice);
  }
});

table {
  background: red;
  color: white;
}

.simple-product-tile {
  padding: 10px;
}

.product-title {
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-product-tile">
  <a class="product-title">unique</a>
  <span class="lbl-price">Loading...</span>
</div>
<div class="simple-product-tile">
  <a class="product-title">foo</a>
  <span class="lbl-price">Loading...</span>
</div>
<div class="simple-product-tile">
  <a class="product-title">foo 2</a>
  <span class="lbl-price">Loading...</span>
</div>
<br><br>
<table>
  <tr>
    <td>unique</td>
    <td>1.99</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>1.99</td>
  </tr>
  <tr>
    <td>foo 2</td>
    <td>2.99</td>
  </tr>
</table>