Question

我需要有关如何从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 = =＆＃34; Global＆＃34;和var keyword2 =＆＃34; Global＆＃34 ;;然后是4个结果，因为Global和Global有4个匹配的实例。 - 好的
如果var keyword = =＆＃34; Global＆＃34;和var keyword2 =＆＃34; Main＆＃34 ;;然后它仍然显示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 keywordArray = [keyword，keyword2]; var text =＆＃34;＆＃34 ;; var i = 0; var first = true; while（i＆lt; keywordArray.length）{//在此更改 - 关键字不是数组 if（！first）text + =＆＃34;，＆＃34 ;; first = false;

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

Answer 2

尝试

＆＃13;

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

＆＃13;

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

＆＃13;

如何从两个jquery：contains（）选择器实例中获取总实例

2 个答案: