如何在遍历元素循环时检查文本

Question

尝试创建一个在每个跨度中迭代的脚本，以检查它是否包含与页面的h1元素相同的文本。

$(document).ready(function() {
var partTitle = $("#product_title").text();
$("span").each(function(i) {
if ($(this).text().is(":contains('" + partTitle + "')")) {
$(this).css = ("display", "none");
} else {
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>
<label class="radio-option">
<span>5/8</span> 
</label>
<label class="radio-option">
<span>1/8</span> 
</label>
<label class="radio-option">
<span>1/2</span> 
</label>

Codepen:

Answer 1

那么，您想看看跨度中的文本是否完全匹配，或者它们的部分是否在您的partTitle中？

<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1> 
<label class="radio-option">
<span>5/8</span> 
</label> 
<label class="radio-option">
<span>1/8</span> 
</label> 
<label class="radio-option">
<span>1/2</span> 
</label>

如果你只是检查你的跨度是否包含partTitle中的任何文本，你可以这样做：

$(document).ready(function() {
var partTitle = $("#product_title").text();
$("span").each(function( i ) {
console.log(partTitle.includes($(this).text()));
if ($(this).text().includes(partTitle)) {  
console.log('hi');
$(this).css = ("display", "none"); 
} else {
}
});
});

console.log包含如何检查它们中是否有h1中的一些文本，因此5/8跨度为true。

上面if中的当前代码检查跨度的文本是否完全匹配。

Answer 2

如果您想检查标题字符串是否在每种情况下都包含span文本，请检查下一个示例：

$(document).ready(function()
{
var partTitle = $("#product_title").text();
$("span").each(function(i)
{
if ( partTitle.includes($(this).text()) )
{
$(this).fadeOut(2000);
// Alternatively you can use hide, like on next line.
// fadeOut() was used because it gives more time to
// see it working.
//$(this).hide();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>
<label class="radio-option">
<span>5/8</span>
</label>
<label class="radio-option">
<span>1/8</span>
</label>
<label class="radio-option">
<span>1/2</span>
</label>

如果您想检查span文本是否包括header文本，则可以实现类似的逻辑：

$(document).ready(function()
{
var partTitle = $("#product_title").text();
$("span").each(function(i)
{
if ( $(this).text().includes(partTitle) )
{
$(this).fadeOut(2000);
// Alternatively you can use hide, like on next line.
// fadeOut() was used because it gives more time to
// see it working.
//$(this).hide();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>
<label class="radio-option">
<span>5/8 Other Stuff</span>
</label>
<label class="radio-option">
<span>1/8</span>
</label>
<label class="radio-option">
<span>1/2</span>
</label>

Answer 3

使用.filter()首先缩小匹配元素的集合
然后将.css({display: "none"})应用于已过滤的集合

jQuery(function($) {
var partTitle = $("#product_title").text();
$(".radio-option span")
.filter((i, el) => partTitle.includes(el.textContent))
.css({display: "none"});
});

<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>
<label class="radio-option"><span>5/8</span></label>
<label class="radio-option"><span>1/8</span></label>
<label class="radio-option"><span>1/2</span></label>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

或者更好的是，使用一些CSS实用程序类来代替.css({display: "none"})，比如：

.addClass("u-none");

Answer 4

您可以使用includes()函数，如：

$(document).ready(function() {
var partTitle = $("#product_title").text();
$("span").each(function(i) {
if ($(this).text().includes(partTitle)) {
$(this).css("color", "green");
} else {
$(this).css("color", "red");
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>
<label class="radio-option">
<span>5/8</span> 
</label>
<label class="radio-option">
<span>5/8 Other Stuff</span> 
</label>
<label class="radio-option">
<span>1/8</span> 
</label>
<label class="radio-option">
<span>1/2</span> 
</label>