jQuery

Question

如果我的问题很愚蠢，我想提前道歉，但我是 jQuery 的新手。我想要实现的是比较两个变量。第一个将从 div 中获取其值。第二个将是一个数组。如果有人能给我提示我的错误所在，我将不胜感激。提前谢谢你。

此致，乔治

var User  = $('.User').text();
var Lucky_Names = ["Florence", "Brenda", "Steven"];
console.log(Lucky_Names);

if(User.indexOf(Lucky_Names) >= 1){
  alert("Congratulations, we found a match.");
}
else{
  alert("We couldn't find a match.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Answer 1

您不能使用 User.indexOf(Lucky_Names)。

编辑：此外，您的 User 将作为输入，而 Lucky_Users 包含 3 个元素。您也可以使用 Lucky_Names.indexOf(User) > -1

我相信您要实现的目标是在 Lucky_Names

中找到 User 位置

您需要提供索引 Lucky_Names

var position=-1;
for(var i=0;i<Lucky_Names.length;i++) {
  if(Lucky_Names[i] === User) {
    position=i;
  }
}
console.log(position)

如果 User 匹配任何 Lucky_Names，位置将是它在 Lucky_Names 中的索引，否则它将是 -1.

Answer 2

您必须使用 jQuery.each 遍历每个 .User 元素，将数组设为正则表达式或像这样从中创建一个会更容易：

var Lucky_Names = ["Florence", "Brenda", "Steven"];

var regex = new RegExp(Lucky_Names.join('|')); // regex: /Florence|Brenda|Steven/ (must be escaped if there is special characters)

$('.User').each(function() {                   // for each .User element
  var text = $(this).text();                   // get the text
  if(regex.test(text)) {                       // check if the regex matchs
    $(this).addClass("highlight");
  }
});

.highlight {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Florence Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Answer 3

可以使用jQuery.grep进行迭代 .User 个元素，.some()，.indexOf() 过滤 .textContent 个元素。

var Lucky_Names = ["Florence", "Brenda", "Steven"];
var matches = $.grep($(".User"), function(user) {
  return Lucky_Names.some(function(prop) {
  return user.textContent.indexOf(prop) > -1
  });
});

if (matches.length) {
  // do stuff
  $.each(matches, function() {
    this.style.color = "green"
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

您也可以使用 .filter()

var Lucky_Names = ["Florence", "Brenda", "Steven"];
var matches = $(".User").filter(function(index, user) {
  return Lucky_Names.some(function(prop) {
  return user.textContent.indexOf(prop) > -1
  });
});

if (matches.length) {
  // do stuff
  matches.each(function() {
    this.style.color = "green"
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

Answer 4

$('.User').text() 将 return 所有名称连接成一个字符串，如下所示：

"Mark WattsWanda HathawayAnn BailesHal PiccirilloRichard BransonJeffery RobisonChristina HammonsHelen ClarkeTerra HerreraSteven Rhodes"

查找此字符串是否包含来自 Lucky_Names 的任何名称：

var User  = $('.User').text();
var Lucky_Names = ["Florence", "Brenda", "Steven"];
console.log(Lucky_Names);

var _foundFlag = false;
Lucky_Names.forEach( function (d) {
    if (User.indexOf(d) > -1) //Note that 0 is also a positive match
        _foundFlag = true;
})

if (_foundFlag) {
    alert("Congratulations, we found a match.");   
} else {
    alert("We couldn't find a match.");
}

Answer 5

这可以解决您的问题 + 还可以提醒哪些用户很幸运。由于您是 jQuery 的新手，也可能是 Javascript 的新手，我将尝试解释我所做的事情。

将变量 users、luckyNames 和 luckyUsers 声明为 const（常量值，因为它永远不会被重新分配）MDN Docs - const.
使用Array.from(...)MDN Docs - Array.from

$('.User')

我正在使用 map 函数创建一个新数组，其中包含对 users 数组 MDN Docs - map. Also check out MDN Docs - arrow functions 中每个项目应用操作的结果，以了解user => {...}
之后，我应用了一个 filter 函数，该函数将为我筛选幸运用户。这发生在函数内部，我检查名字（在这里应用空格拆分来获取它）是否在我的 luckyNames 数组 MDN Docs - filter.
最后我检查我的 luckyUsers 数组（仅包含过滤后的匹配项）的长度是否大于 0。
为了很好地提醒一切，我使用了模板文字，它允许我嵌入表达式 MDN Docs - template literals.
在模板文字中，我使用 join(...) 来显示由 , 和空格 MDN Docs - join.[=33= 分隔的匹配名称]
要查看 join(...) 的工作原理，只需 change/add 列表中的名称即可。

const users = Array.from($('.User'));
const luckyNames = ["Florence", "Brenda", "Steven"];

const luckyUsers = users.map(user => {
  return user.innerHTML.replace(/<[^>]*>/, '');
}).filter(user => {
  return luckyNames.indexOf(user.split(' ')[0]) > -1;
});

if(luckyUsers.length > 0){
  alert(`Congratulations, we found a match: ${luckyUsers.join(', ')}`);
} else{
  alert("We couldn't find a match.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="User">Mark Watts</div>
<div class="User">Wanda Hathaway</div>
<div class="User">Ann Bailes</div>
<div class="User">Hal Piccirillo</div>
<div class="User">Richard Branson</div>
<div class="User">Jeffery Robison</div>
<div class="User">Christina Hammons</div>
<div class="User">Helen Clarke</div>
<div class="User">Terra Herrera</div>
<div class="User">Steven Rhodes</div>
<br>
<div style="color:red">PS: All the names in this list were randomly generated.</div>

jQuery - 比较数组中的 indexOF

jQuery - compare indexOF from an array

javascript

arrays

indexof