javascript - 如何从两个jquery获取总实例:contains() selector instances

Question

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

为了进一步解释，以下是详细信息 -

html div block -

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

我的测试用例 -

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

这是我的 fiddle 供引用 - http://jsfiddle.net/358bx237/

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

提前谢谢您。

Answer 1

问题是您的 while 循环迭代 keyword - 而不是您想要的关键字数组:你这样做:

var keyword= "Global";

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

您基本上会迭代第一个关键字的所有字母 - 最终选择此:$("div[class^=keywords]:contains('G'):contains('l'):contains ('o'):包含('b'):包含('a'):包含('l')

您应该做的是创建一个数组来保存关键字并对其进行迭代(并确保进行 OR 选择)

http://jsfiddle.net/358bx237/5/ var 关键字数组 = [关键字, 关键字2]; var 文本 = ""; 变量我 = 0; var 首先 = true; while (i < keywordsArray.length) {//此处更改 - 关键字不是数组 if (!first) 文本 += ","; 首先=假；

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