Question

以下是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代码中，我试图将不同的样式应用于子节点和父节点。除了斜体样式外，一切正常。谁能解释我为什么会发生这种奇怪的事情。

抱歉错过了这个 - 我将斜体应用于父母，但孩子们也被改变了。如何防止这种情况？

Answer 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'
    })
});

DEMO：http://jsfiddle.net/T9zBS/

我怀疑你只期望在父文本中使用斜体，在这种情况下，现在显然你需要将子设置为普通字体。

jquery中的end（）方法有效，但表现出奇怪的行为

1 个答案: