JQuery - 组合选择器，包括：contains答案

【问题标题】：JQuery - Combing Selectors including :containsJQuery - 组合选择器，包括：contains
【发布时间】：2012-06-25 19:18:09
【问题描述】：

到目前为止的故事......

你好 Stackoverflowers，我又来了！对，我现在正在学习 JQuery，我想构建一个 “键入时搜索” AJAX/JSON 控件。所以离开 vie 进入 JSFiddle 构建一个骨架函数并在其上构建，边走边学。您在过去几天里帮助了我，非常感谢您：

JQuery - Using Selector :contains - Weird Results

JQuery - Iterating JSON Response

现在我只显示与输入匹配的选定列表项。

“那你现在有什么问题..”我在这里你呻吟！（是的，我现在有我的电子书！）:)

JQuery nOOb 问题第 3 部分：多个选择器。

我一直在使用JQuery Multiple Selectors API 指南，所以我了解如何包含多个选择器，但我的问题是我没有选择任何东西，即 :contains 没有找到任何东西。这是不正确的吗，我使用了 JSLint 并且它已正确解析且没有错误：

$("li[id^='live'] li:contains('" + this.value + "')").show();

我的完整 JSFiddle 代码在这里，但为了方便起见，我也将其包含在内：

http://jsfiddle.net/garfbradaz/JYdTU/88/

$(document).ready(function() {
var $input = $("#livesearchinput"),
    filled = false;
$.ajaxSetup({
    cache: false
});
$input.keyup(function(key) {
    if (!filled) {
        filled = true;
        $.getJSON("/gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) {
            var $ul =
            $('<ul>').attr({
                id: "live-list"
            }).appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                    $('<li>').attr({
                        id: "live-" + val
                    }).append(val).appendTo($ul).hide();
                });
            });
        });
    }

    var n = 0;

    if (this.value !== "") {
        n = $("li:contains('" + this.value + "')").length;
        n2 = $("li[id^='live'] li:contains('" + this.value + "')").length;
        console.log("1. value of n2 equals " + n2 + " : " + this.value + "end");


    }
    else {
        n = 0;
    }

    if (n <= 0) {
        $('li[id ^= "live"]').hide("slow");
        console.log("1. value of n equals " + n + " : " + this.value + "end");
    }

    if (n > 0) {
        $("li[id^='live'] li:contains('" + this.value + "')").show();
        console.log("2. value of n equals " + n + " : " + this.value + "end");
    }


});

});

我所做的是放一个console.log n2 始终为0，这里是f12 日志以供证明：

所以我的问题是：

如何更正多重选择器以包含 :contains 以便我知道未来
我应该使用 :contains，还是应该以不同的方式处理它并使用 .filter()？在发布之前，我正在研究这个问题，并找到了一个很好的堆栈答案，详细说明了这个问题的使用：

JQuery Contains Selector - Multiple Text Items

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

在您的情况下，您只需要组合两个选择器：li id starts with 和 li contains。每个选择器相似的部分是li，所以以li开头，再加上另外两个。

$("li[id^='live']:contains('" + this.value + "')").length;

http://jsfiddle.net/JYdTU/89/

我只更新了一行以使控制台输出正确，您必须通过小提琴并更新其余部分。

【讨论】：