通過面板組標題搜索

我試圖創建一個搜索引擎來搜索我生成的面板組，但我沒有得到正確的選擇器。通過面板組標題搜索

生成的標記看起來是這樣的：

<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){ 

    }); 
});

我遇到的問題是我不知道如何構建選擇器。我試圖訪問輸出格，然後設置的起點在每個.panel航向，但我得到這個錯誤：

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

有人可以請幫助我建立選擇？如何獲得如此多的孩子元素？

爲了說明起見，我想輸入t，然後只顯示帶有標題測試的面板。包含在標題中的「span」不應包含在搜索結果中。

Here's小提琴： https://jsfiddle.net/78znm4t3/1/

來源

2016-02-26 el solo lobo

您以錯誤的方式使用$j.each。 $j.each適用於數組，但不適用於選擇器。 $j('').each適用於選擇器。我做了一個搗鼓你here

你可以使用$j('some_selector').find('child_selector')至於你提到讓子元素

來源

2016-02-26 08:45:13

謝謝哥們，那對我很有用。 –

歡迎@ Dev0x.glad它幫助你。但請確保你在jquery文檔中使用低谷選擇器。 –

，他們的方式構建的選擇和使用各不正確。修改您的腳本部分到

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它工作。

來源

2016-02-26 08:46:12 Siva

通過面板組標題搜索

回答

相關問題