搜索面板组标题

Question

我正在尝试创建一个搜索引擎来搜索我生成的面板组，但我没有完成正确的选择器。

生成的标记如下所示：

<div id="output">
<div class="panel-group">
<div class="panel panel-default">
    <div class="panel-heading">
        <div>
            <a data-toggle="collapse" href="#1">test<span class="status">Enabled</span></a>
        </div>
    </div>
</div>
</div>

<div class="panel-group">
<div class="panel panel-default">
    <div class="panel-heading">
        <div>
            <a data-toggle="collapse" href="#2">Cookie<span class="status">Enabled</span></a>
        </div>
    </div>
</div>
</div>

等等……

然后我创建了一个输入字段

<input id="input_search" type="text" class="input-md">

还有我的 JS 代码

$j("#input_search").on('keyup', function(){
    console.log("keyUp");
    $j.each("#output .panel-group", function(i, val){
       console.log(val);
    });
    $j("#output").each(".panel-group .panel .panel-heading", function (i, val){

    });
});

我的问题是我不知道如何构建选择器。我尝试访问输出 div，然后在每个 .panel-heading 处设置起点，但出现此错误：

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in #output .panel-group

有人可以帮我构建选择器吗？如何访问这么多子元素？

为了澄清，我想输入 t 然后只显示带有标题测试的面板。标题中也包含的“span”不应包含在搜索结果中。

这是一个小提琴： https://jsfiddle.net/78znm4t3/1/

Answer 1

正如您所提到的，您构建选择器并在每种方法中使用的方式都不正确。将您的脚本部分修改为

var $j = jQuery.noConflict(true);
$j(document).ready(function () {

});
$j("#input_search").on('keyup', function(){
    console.log("keyUp");
    $j("#output .panel-group").each(function(i){
       console.log($j(this).text().trim());
    });
    $j("#output .panel-group .panel .panel-heading").each(function (i){

    });
});

我在你的 jsfiddle 中试过了。

Answer 2

您以错误的方式使用$j.each。 $j.each 适用于数组，但不适用于选择器。$j('').each 适用于选择器。我为你做了一个小提琴here

你可以使用$j('some_selector').find('child_selector')来获取子元素