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 属性和子级的属性结合起来，并且只为每个属性调用一个 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 回答