1

次のコードが期待どおりに機能しないのはなぜですか? (class = clear で div の前のすべての要素を選択しますか?)

HTML:

<div id="text">    
    line0
    <div>line1</div>
    <div>line2</div>

    <div class="clear" />        
    <div>dummy</div>
    <p>dummy</p>        
</div>

JS:

var allow = true;    
var output = $('#text *').filter(function(index) {        
    if( $(this).attr("class") == 'clear') {
        allow = false;
    }

    return allow;        
}).html().trim();

alert( output );

出力:

line1

期待: line0 line1 line2

4

3 に答える 3

3

これは、.html()言うように

一致した要素のセットの最初の要素の HTML コンテンツを取得します。

したがって、両方のdivが選択されていますが、1つだけが返されます.html()

このフィドルをチェックして、コードが両方の要素を返していることを確認してください。

そして、他の人がすでに言ったように、この.hasClass方法を使用する必要があります。

アップデート

それline0はどのノード内にもないため、textNode です。最初に textNode の周りにスパン タグをループして追加できます。または、そのテキストにスタイルを適用できません。次のコードを確認してください

var whitespace = /^\s*$/;
$('#text').contents().filter(function(){
    return this.nodeType == 3 && !whitespace.test(this.nodeValue);
}).wrap('<span></span>');

これは、すべての子ノード (テキストノードを含む) をループし、スペース以外のテキストノードを でラップしspanます。

その後、 line0 は のようなスパンタグ内になります<span>line0</span>。だから今あなたがするなら

$('.clear').prevAll().css('color', 'red');

それもハイライトしline0ます。

MDNの Node Types Doc を確認してください

働くフィドル

于 2012-06-14T14:18:08.847 に答える
2

html() メソッドはセレクターの最初の要素の内容を返すためです。

http://api.jquery.com/html/

セレクター式が複数の要素に一致する場合、最初の一致のみがその HTML コンテンツを返します。

于 2012-06-14T14:17:36.973 に答える
1 
$('.clear').prevAll().css('color', 'red').fadeOut(2000);​

ライブデモ

ちなみに、要素にクラスがあるかどうかを確認したい場合は、.hasClass(class)
例を使用します。

var hasClass = $(this).hasClass('clear');
于 2012-06-14T14:10:50.320 に答える