在 HTML 中动态移动结束标记的位置答案

【问题标题】：Move position of end tag dynamically in HTML在 HTML 中动态移动结束标记的位置
【发布时间】：2011-11-17 01:56:20
【问题描述】：

这个问题的解决方案感觉就在我的舌尖上，但我想不出办法。考虑以下 HTML：

<span>This has some text.
    <span>This has some more text.</span>
    <span>And so on.</span>
    <span>And so forth, et cetera, et cetera, et cetera...</span>
</span>

每个 span 都有一个点击监听器：

$("span").click(function()
{
    $(this).css("color", "somecolor");
}

当 PARENT 跨度的 css 发生变化时，有没有办法防止 css 变化传播到子元素？还是一种仅使更改影响单击范围内的 TEXT 的方法？

我知道有一些方法可以重新组织 html 以使其更容易，但我正在处理由我无法更改的遗留系统自动生成的非常畸形的 html。

【问题讨论】：

标签： jquery html css dom

【解决方案1】：

总之，没有。这是 CSS 的“级联”部分。

您必须专门添加 CSS 才能撤消对这些子元素所做的更改。例如：

$("span").click(function() {
    $(this).css("color", "blue")
        .children().css("color","black");
});

根据您的 HTML 的具体外观，您可能还需要阻止点击传播到最外层的span：

$("span").click(function() {
    e.stopPropagation();
    $(this).css("color", "blue")
        .children().css("color","black");
});

一个可能不太复杂的解决方案是使用!important 确定子spans 的CSS 样式：http://jsfiddle.net/mblase75/ce2Av/2/ 但是，您需要以这种方式指定该外部跨度的 all 子元素，这可能会根据您的 HTML 变得复杂。

如果你想让孩子们不都是一种颜色，而是保持他们之前的颜色，那么事情就会变得棘手。您必须事先使用数组缓存这些值，然后一一重新分配它们。

【讨论】：

我最终不得不按照你在最后一段中所说的去做。我不希望它发生这种情况，但看起来没有其他办法了。谢谢！

【解决方案2】：

点击停止事件传播并添加一些类到跨度。在 CSS 中创建两个规则 - 用于 span 的通用规则和用于 class 的另一个规则。子元素在点击时不会受到影响。

Javascript

$("span").click(function(e){
    e.stopPropagation();
    $(this).addClass("special");
});

CSS

span{
    color:#DDD;
}
.special{
    color:#0077cc;
}

【讨论】：