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

搜索面板组标题

1 个答案: