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

Question

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

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

htmldiv块-

<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 keyword=="Global"和var keyword2="Global）；那么4个结果，因为Global和Global有4个匹配的实例。-好的
2. 如果var keyword=="Global"和var keyword2="Main"；那么它仍然显示4个结果，但应该是6个结果，因为有6个匹配的实例。-不正确

这是我的小提琴供参考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'):contains('b'):contains('a'):contains('l')

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

http://jsfiddle.net/358bx237/5/var关键字数组=[关键字，关键字2]；var text="；var i＝0；var first=true；while（i<keywordArray.length）｛//更改此处-关键字不是数组如果（！first）text+="，"；first=false；

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

Answer 2

尝试

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>