javascript - 仅针对特定的 li 元素显示一个按钮和删除线

Question

我有以下代码，它工作得很好，除了涉及可能嵌套在我定位的 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 的元素应该被删除并显示链接 - 如代码所述？

Answer 1

那是因为 text-decoration: strike-through属性适用于 <li> 中的所有文本具有 HTML5 数据属性的元素 is-archived的值(value) true ，不管嵌套的 child 是否适合选择器。我已经在 J​​Sfiddle 中复制了你的问题(下次请你自己做):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();

请在此处查看概念验证 fiddle :http://jsfiddle.net/teddyrised/TZVej/2/

p/s:我不确定你为什么要使用 .map()在问题的上下文中没有用处时起作用...