搜索面板組標題

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

您正在錯誤地使用$j.each 。 $j.each適用於數組，但不適用於選擇器。 $j('').each適用於選擇器。 我在這里為你擺弄

您可以使用$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中嘗試了它的工作原理。