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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

c# - Create a Notification Object (Email or Page) At Run Time -- Dependency Injection or Factory -

Set Up Of Common Name Of SSL Certificate To Protect Plesk Panel -