Блог

У меня есть следующий код, который работает отлично, за исключением случаев, когда речь идет о вложенных элементах LI, которые могут быть вложены в элемент li, на который я нацеливаюсь:

 $('#comment-section .comment-box a#un-do').hide();

$('#comment-section ul li[data-is-archived="true"]').map(function() {
  $('#comment-section ul li[data-is-archived="true"]').css('text-decoration', 'line-through');
  $('#comment-section ul li[data-is-archived="true"] a#un-do').show();
}).get();
 

Что это сделает, так это вычеркнет любой текст в этом элементе li и покажет ссылку отмены для каждого элемента li, который соответствует этому конкретному элементу (или набору).

 ul
 li - strike through works, shows undo button, data-is-archived = true
  ul
   li - strike through works, shows undo button, data-is-archived = false
 

Почему каждый вложенный элемент li вычеркивается и появляется ссылка, когда только те, у data-is-archived=true которых должна быть вычеркнута и ссылка отображается — как указано в коде?

Это потому text-decoration: strike-through , что свойство применяется ко всему тексту в <li> элементе, который имеет атрибут данных HTML5 is-archived значения true , независимо от того, соответствуют ли вложенные дочерние элементы селектору или нет. Я воспроизвел вашу проблему в JSfiddle (пожалуйста, сделайте это самостоятельно в следующий раз): http://jsfiddle.net/teddyrised/TZVej/1 /

Решением было бы обернуть текст внутри каждого <li> элемента <span> элементом и применить его с помощью ограничительного CSS только для прямого потомка.

 $('#comment-section .comment-box a#un-do').hide();
$('#comment-section ul li[data-is-archived="true"]').map(function() {
    // Target only <span> elements that are direct descendants
    $('#comment-section ul li[data-is-archived="true"] > span').css('text-decoration', 'line-through');
    $('#comment-section ul li[data-is-archived="true"] a#un-do').show();
}).get();
 

См. Доказательство концепции скрипки здесь: http://jsfiddle.net/teddyrised/TZVej/2 /

p / s: я не уверен, почему вы используете .map() функцию, когда она бесполезна в контексте вопроса…