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>元素中具有值is-archived的HTML5数据属性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()函数时使用{{1}}函数...

显示一个按钮，仅针对特定的li元素进行检查

1 个答案: