正在搜索 panel-group header

Question

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

生成的标记如下所示：

<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

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

为澄清起见，我想输入 t，然后只显示标题为 test 的面板。 header 中也包含的 "span" 不应包含在搜索结果中。

这是一个 fiddle： https://jsfiddle.net/78znm4t3/1/

Answer 1

您使用 $j.each 的方式有误。 $j.each 适用于数组但不适用于选择器。$j('').each 适用于选择器。我给你做了一个fiddlehere

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

Answer 2

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

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 中试过它有效。

正在搜索 panel-group header

Searching through panel-group header

javascript

jquery

panel

twitter-bootstrap