2010-12-30 2 views
1

htmlは、AJAXリクエストの結果として生成されるインラインJavaScriptを含むHTMLです。以下のコード:jQueryセレクタとフィルタの予期しない結果

$('script', $(html)) 

は空の配列を返す:

$(html).filter('script') 

一方、各スクリプトタグのjQueryオブジェクトを返します。これはどのように可能ですか?私はChromium 10.0を使用しています。

+3

$( 'script'、$(html)) '$(html)ノードがあなたの望む

0

ここで何かが得られました。答えがまだ適切かどうか、とにかくここに行くのだろうかと思います。
新しいJSファイルを作成するには、 "scriptTagTest.js" は、以下のjsを追加し、コード

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="scriptTagTest.js"></script> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
    <div id="inStr">test</div> 
    <button id="test1">Test $(html).filter('script')</button> 
    <button id="test2">Test $('script', $(html))</button> 
    <div id="testArea">&nbsp;</div> 
</body> 
</html> 

クリックして "Test1を" と "Test2を" を参照するよう

var html = '<div>I am DIV</div><script type="text/javascript">alert("I am inline");</script>'; 
$(document).ready(function(e){ 
    $('#inStr').text(html); 
}); 

$('#test1').live('click', function(e){ 
    var $html = $(html); 
    var o = $html.filter('script'); 
    check(o); 
}); 

$('#test2').live('click', function(e){ 
    var $html = $(html); 
    var o = $('script', $html); 
    check(o); 
}); 

function check($o, $html){ 
    alert('obj len:'+ $o.length); 
    var $testArea = $('#testArea'); 
    if($o.length > 0){ 
    $testArea.append($o); 
    } 
    else{ 
    $testArea.text('No script obj'); 
    } 
} 

し、HTMLファイルとしてそれを言います結果。興味深いことに、ブラウザでは、という変数を正しく解析していませんでした。なぜなら、これは別のJSファイルだからです。

find()は、子要素を調べるために使用され、filter()は、オブジェクトのフラットなリストでも検索されます。あなたが入ってくるHTMLがhtmlという形であれば、それは何かを説明するかもしれません。
これはChrome 8(デスクトップ)、FF、IEの最新バージョンでテストされています。お役に立てれば。ベストはFirebugを使用してドリルダウンすることです!