0

以下はHTMLコードです

<div id="Parent">
            This is Parent Div
             <p> This is first child.</p>
             <p> This is second child.</p>
             <p> This is Third child.</p>
        </div>

<input type="button" id="clickme" value ="click me" />

ここにjQueryコードがあります

$('#clickme').click(function() {
    $('#Parent')
    .children() // 1st phase action on children begins here
    .css('color', 'blue')
    .end() //Here 1st phase action on children ends 
    .css({
        'color': 'red',
        'border-color': 'blue',
        'border-width': '3px',
        'border-style': 'solid'
    }) // Here 1st phase action on Parent completed
   .children() //2nd phase action on children begins
   .css({
        'border-color': 'red',
        'border-width': '2px',
        'border-style': 'solid'
    }).end() // 2nd phase action on children ends
    .css('font-style', 'italic'); //2nd phase action on parent begin/ends
});​

上記の jquery コードでは、子と親に異なるスタイルを適用しようとしています。斜体スタイル以外はすべて正常に機能します。なぜこの奇妙なことが起こるのか、誰か説明してくれませんか?

申し訳ありませんが、これを逃しました - 親にイタリック体を適用していますが、子も変更されます。これを防ぐ方法は？

4

1 に答える 1

1

異なる css を設定するために親と子の間を行き来するのはほとんど意味がありません。

親の css プロパティと子のプロパティを組み合わせて、それぞれに対して 1 つの css 呼び出しを行うだけです。画像から使用することの混乱を取り除き、end()より効率的で読みやすくなっています。

$('#clickme').click(function() {
    $('#Parent')   
    .css({
        'font-style': 'italic',
        'color': 'red',
        'border-color': 'blue',
        'border-width': '3px',
        'border-style': 'solid'
    })
   .children()
   .css({
       'color':'blue',
        'border-color': 'red',
        'border-width': '2px',
        'border-style': 'solid'
    })
});

デモ: http://jsfiddle.net/T9zBS/

親のテキストにのみ斜体を期待していると思われます。その場合、子も通常のフォントに設定する必要があることは明らかです。

于 2012-06-16T12:49:39.197 に答える