javascript - show a button and strike through only for that particular li element -
javascript - show a button and strike through only for that particular li element -
i have next code, works perfectly, except when comes nested li elements might nested under li element targeting:
$('#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();
what strike out text in li element, , show undo link each li element matches particular element (or set of).
ul li - strike through works, shows undo button, data-is-archived = true ul li - strike through works, shows undo button, data-is-archived = false
why every nested li element getting striked through , having link appear when ones data-is-archived=true
should have strike through , link show - code states?
that because text-decoration: strike-through
property applies text in <li>
element has html5 info attribute is-archived
of value true
, regardless of whether nested children fits selector or not. have replicated problem in jsfiddle (please next time): http://jsfiddle.net/teddyrised/tzvej/1/
the solution wrap text within each <li>
element <span>
element, , apply via restrictive, direct descendent-only css.
$('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]').map(function() { // target <span> elements 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();
see proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/tzvej/2/
p/s: not sure why using .map()
function when there no utilize in question's context...
javascript jquery html css
Comments
Post a Comment