如何从两个 jquery:contains() 选择器实例中获取总实例答案

【问题标题】：How to get total instance from two jquery:contains() selector instances如何从两个 jquery:contains() 选择器实例中获取总实例
【发布时间】：2014-11-27 00:00:37
【问题描述】：

我需要有关如何从 2 个 jquery:contains() 选择器实例中获取总实例的帮助。对于某些多重需求，我需要获取变量的两个实例并显示总结果而不重复。

为了进一步解释，这里是详细信息-

html div 块 -

<div id="results"></div>

<div class="container">
<div class="keywords" style="display:none">Global, City1</div>
<div class="display" style="display:none">Results one for Global City1</div>
</div>

<div class="container">
<div class="keywords" style="display:none">Global, City2</div>
<div class="display" style="display:none">Results one for Global City2</div>
</div>

<div class="container">
<div class="keywords" style="display:none">Global, City3</div>
<div class="display" style="display:none">Results one for Global City3</div>
</div>

<div class="container">
<div class="keywords" style="display:none">Global, City4</div>
<div class="display" style="display:none">Results one for Global City4</div>
</div>

<div class="container">
<div class="keywords" style="display:none">Main1, City1</div>
<div class="display" style="display:none">Results one for Main1 City1</div>
</div>

<div class="container">
<div class="keywords" style="display:none">Main2, City2</div>
<div class="display" style="display:none">Results one for Main2 City2</div>
</div>

我的 javascript -

    var keyword= "Global";
var keyword2= "Main";

$('.container').has('.keywords:contains('+keyword+')').children(".display").show();

var text = "";
var i = 0;

while (i < keyword.length) {
        text += ":contains('"+keyword[i]+"')";
        i++;
    }

// keyword 2
$('.container').has('.keywords:contains('+keyword2+')').children(".display").show();

var text2 = "";
var x = 0;

while (x < keyword2.length) {
        text2 += ":contains('"+keyword2[i]+"')";
        x++;
    }

var results1 = $("div[class^=keywords]"+text+"").length;
var results2 = $("div[class^=keywords2]"+text2+"").length;
var results = results1 + results2;

$("#results").append(results);

我的测试用例 -

如果 var keyword = = "Global" 并且 var keyword2= "Global";然后是 4 个结果，因为 Global 和 Global 有 4 个匹配的实例。 - 好的
如果 var keyword = = "Global" 并且 var keyword2= "Main";那么它仍然显示 4 个结果，但它应该是 6 个结果，因为有 6 个匹配的实例。 - 不正确

这是我的小提琴供参考 - http://jsfiddle.net/358bx237/

如何更正我的代码以显示测试用例 #2 的 6 个结果？

提前谢谢你。

【问题讨论】：

好的。由于答案不起作用。我会删除代码。谢谢

标签： javascript jquery jquery-selectors contains

【解决方案1】：

试试

function keyFilters(keys) {
  var $els = $('.container .keywords'),
    $result = $();
  $.each(keys, function(i, key) {
    $result = $result.add($els.filter(':contains(' + key + ')'));
  });
  return $result;
}

function test(keys) {
  $('#results').append('<div>Keys: ' + keys.join(', ') + ': ' + keyFilters(keys).length + '</div>')
}

test(['Global', 'Global']);
test(['Main', 'Global']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="results"></div>
<div class="container">
  <div class="keywords" style="display:none">Global, City1</div>
  <div class="display" style="display:none">Results one for Global City1</div>
</div>
<div class="container">
  <div class="keywords" style="display:none">Global, City2</div>
  <div class="display" style="display:none">Results one for Global City2</div>
</div>
<div class="container">
  <div class="keywords" style="display:none">Global, City3</div>
  <div class="display" style="display:none">Results one for Global City3</div>
</div>
<div class="container">
  <div class="keywords" style="display:none">Global, City4</div>
  <div class="display" style="display:none">Results one for Global City4</div>
</div>
<div class="container">
  <div class="keywords" style="display:none">Main1, City1</div>
  <div class="display" style="display:none">Results one for Main1 City1</div>
</div>
<div class="container">
  <div class="keywords" style="display:none">Main2, City2</div>
  <div class="display" style="display:none">Results one for Main2 City2</div>
</div>

【讨论】：

【解决方案2】：

问题是您的 while 循环遍历 keyword - 不是您想要的关键字数组：你这样做：

var keyword= "Global";

while (i < keyword.length) {
        text += ":contains('"+keyword[i]+"')";
        i++;
}

您基本上遍历了第一个关键字的所有字母 - 最终选择了这个：$("div[class^=keywords]:contains('G'):contains('l'):contains('o'):contains('b'):contains('a'):contains('l')

您应该做的是创建一个包含关键字的数组并对其进行迭代（并确保您进行 OR 选择）

http://jsfiddle.net/358bx237/5/ var 关键字数组 = [关键字，关键字 2]; 变种文字=“”；变量 i = 0; var first = true; while (i

    text += "div[class^=keywords]:contains('" + keywordArray[i] + "')"
    //  text += ":contains('"+keywordArray[i]+"')";
    i++;
}
console.log(text);
var results = $(text).length;

【讨论】：