在每个与字符串匹配的元素中获取正确的元素

Question

我想使用 .each() 循环遍历 DOM 元素并找到具有相同 .text() 作为变量的某个元素。如果正确的元素是最后一个兄弟，则会出现问题。

例子：

<p> wrong </p>
<p> wrong </p>
<p> right </p>

在此代码中找到正确的元素之前，它将遍历两个错误的元素。我无法删除else，因为我需要查看是否没有任何元素具有此文本，如果没有，则应该发生其他事情。现在它将为 false 两次，并将创建 2 个新的 <p>，然后当它到达最后一个元素时，它将抛出 alert()。有没有其他方法可以做到这一点？

$('p').each(function() {
    if ($(this).text() == "right") {
        alert("this exists already");
        return false;
    } else {
        // A p will be created with text right
    }
});

Answer 1

我很确定这就是您的要求。

// We care that it exists or not
var already_exists = false;
// Iterate through the existing elements
$('p').each(function() {
    // If it exists, store that and break the loop because we don't need to check any more
    if ($(this).text() == "right") {
        already_exists = true;
        return false;
    }
});

// If, after checking (possibly) all elements, it exists, shout, else create it
if (already_exists){
   alert("this exists already");
}else{
   // A p will be created with text right
}

注意

如果没有检查，我不确定<p> right </p> 上的.text() 是否会匹配“right”，因为存在空格。你可能想要修剪它。 if ($.trim($(this).text()) == "right")

Answer 2

之前和之后文本空间的问题，所以请像下面这样修剪你的文本

if ($.trim($(this).text())== "right") {}

Answer 3

可以为此使用filter()，并且您需要删除空格，否则您的匹配将无法根据所显示的内容进行。

var myVar = 'right';

var exists = $('p').filter(function() {
  return $(this).text().trim() === myVar;
}).length;// length of collection will determine if filter has matches

if(!exists){
   // add element
}

Answer 4

你根本不需要循环。

只需使用:contains() 选择器。

// alert the user if there is at least one <p>right</p> element
if ($('p:contains("right")').length) {
  alert("this exists already");
  
} else {
  // A p will be created with text right
}

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