javascript - 具有多个 div 遍历的 if/else JavaScript 语句

Question

我正在尝试检查一组 id='checkbox-selector-chosen' 的 div，以查看这些 div 中是否存在动态变量 name。以下代码仅在存在一个“checkbox-selector-chosen”div 时才有效。我想做的是获取下面的代码来检查所有“checkbox-selector-chosen”div 是否存在 name。

if($(".checkbox-selector-chosen").text() == name) {
   do something...
}

我正在使用的 div 的结构如下:

<div id="selected-results" class="group">
  <div class="checkbox-selector-chosen">John</div>
  <div class="checkbox-selector-chosen">Dave</div>
  <div class="checkbox-selector-chosen">Jack</div>
</div>

我是 JS/JQuery 新手，我确信这是一个简单的问题，但在我用头撞 table 两天后，我决定在这里提问。

任何帮助将不胜感激!

Answer 1

您可能想使用:contains() selector查看该项目是否存在 ( JsFiddle Demo )

var name='Dave';

//Get all items that contain 'Dave'
var items = $(".checkbox-selector-chosen:contains('" + name + "')");

if (items.length > 0) {
    alert(items.length + ' items found');
}

更新

如果您担心有多个匹配项，您可以使用我的示例以及 each() 函数。 (JsFiddle Demo)。这种方法的优点在于您不必循环遍历所有子 div - 您只需要循环遍历包含所需匹配文本的 div。

var name='Dave';

//Get all items that contain 'Dave'
var items = $(".checkbox-selector-chosen:contains('" + name + "')");

if (items.length > 0) {
    items.each(function(){
        if ($(this).html()==name){
           alert('item found!');
           break;
        }
    });
}

更新2

下面是一个示例，演示了此技术的充分使用。当您单击名称 div 时，将从单击的对象中解析名称，然后我们使用上述方法来查找正确的 div。当然，这不是完成此特定任务的最佳方式，但简单地说明了这个概念。 (JsFiddle Demo)

function findName(name){
    var items = $(".checkbox-selector-chosen:contains('" + name + "')");
    $('.checkbox-selector-chosen').css({'background':'#fff'});
    if (items.length > 0) {
        items.each(function(){
            if ($(this).text()==name){
                $(this).css({'background':'#ff0'});
            }
        });
    }
}

$('.checkbox-selector-chosen').click(function(){
   findName($(this).text());
});