Динамически перемещать позицию конечного тега в HTML

Question

Такое решение кажется, что оно у меня на кончике языка, но я не могу понять, как это сделать.Рассмотрим следующий 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").click(function()
{
    $(this).css("color", "somecolor");
}

Когда диапазон PARENT изменил свой css, есть ли способ предотвратить распространение изменения css?к элементам детей?Или способ сделать так, чтобы изменения влияли только на ТЕКСТ в выбранном диапазоне?

Я знаю, что есть способы реорганизации HTML, которые облегчили бы его, но я имею дело с очень искаженным HTML, автоматически генерируемымУстаревшая система, которую я не могу изменить

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

Aвозможно, менее сложное решение включает в себя использование !important для закрепления стилей CSS подэлементов span s: http://jsfiddle.net/mblase75/ce2Av/2/ Однако вам необходимо указать все субэлементовтаким образом, что это может усложниться в зависимости от вашего HTML.

Если вы хотите, чтобы дети не были одного цвета, а оставались такими, какими они были раньше, тогда все становится непросто.Вам необходимо заранее кэшировать эти значения с помощью массива, а затем переназначать их одно за другим.

Answer 2

По щелчку остановите распространение события и добавьте некоторый класс в span.В CSS создайте два правила - общее для span и другое для класса.Дочерние элементы не будут затронуты при нажатии.

Javascript

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

CSS

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