Question

我正在尝试检查一组id为'checkbox-selector-chosen'的div，以查看这些div中是否存在动态变量 name 。以下代码仅在存在“复选框选择器”div时才有效。我正在尝试做的是获取下面的代码来检查所有'复选框选择器'选择的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的新手，我确信这是一个简单的问题，但是在我的桌子上撞了两天后，我决定在这里问。

任何帮助将不胜感激！

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());
});

Answer 2

您想使用jQuery :contains()选择器。

<!DOCTYPE html>
<html>
  <head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title></title>
  </head>
  <body>
    <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>
    <script type="text/javascript">
      jQuery(".checkbox-selector-chosen:contains(John)").css("background-color","red")
    </script>        
  </body>
</html>

JSBIN

Answer 3

您的类选择器返回一组匹配项。您可以尝试each()迭代它们：

$(".checkbox-selector-chosen").each( function() {
  if ($(this).text() == name) {
    /* ..do something... */
  } } );

Answer 4

$('.checkbox-selector-chosen').each(function(){
    if($(this).text() == name) {
        do something...
    }
});

也许这就是你要找的东西？啊，打败它！

Answer 5

您可以为此使用jquery'each'语法。

   $(".checkbox-selector-chosen").each(function(index, value){
    console.info("index = "+index +" = "+value);
    if(value == name){
        console.info("match");
    }
});

Answer 6

您可以使用contains()选择器过滤结果：

$('input[type="checkbox"]').change(function(){
    var checked = this.checked;
    $('.checkbox-selector-chosen')
     .filter(":contains("+this.value+")")
     .css('color',function(){
       if (checked) return "red";  
          else return "black";
     });
});

示例：http://jsfiddle.net/niklasvh/mww3J/

如果/ else有多个div遍历的JavaScript语句

6 个答案: