Menu
this is my first question here. I have the following jquery code:
$(document).ready(function(){
$("a").click(function(){
$(this).parent("li").css({textDecoration: "line-through"});
return false;
});
});
that works just fine. It strikes through the parent li of any clicked anchor (there are many anchors and lists in the html, not just one). But i want just this functionality, nothing else. Isn't this an overkill to include the whole jquery library?
Unfortunateley i don't know raw javascript very well, can someone convert this for me? I would be grateful.
EDIT: Wow i am amazed at speed and the quality of the answers! So first of all a big THANKS to all of you! I will either go for jonathon's (edit2: roland's) solution or just include jquery after all. Thanks again!
532
Isn't this an overkill to include the whole jquery library?
You tell me. You could serve the library hosted by Google, which may be already cached in the client-side.
In my opinion, being consistent is the key. If you are used to jQuery, then why not continue to use it? Your code will be easier to maintain.
You might find one of my earlier questions interesting: When is it acceptable to use jQuery?
191
The following will achieve it in a browser independent manner.
<html>
<body onload="loaded()">
...content goes here....
<script>
function linkClickHandler(){
var parentNode = this.parentNode;
if(parentNode.tagName.toLowerCase()==="li"){
parentNode.style.textDecoration = "line-through";
}
return false;
}
function loaded(){
for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){
links[i].onclick = linkClickHandler;
}
}
</script>
</body>
</html>
Non-jQuery approach:
[...your html...]
<script type="text/javascript">
var anchors = document.getElementsByTagName("a");
var numAnchors = anchors.length;
for(var i = 0; i < numAnchors; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
var parentEl = this.parentNode;
if(parentEl.tagName.toLowerCase() == "li"){
parentEl.style.textDecoration = "line-through";
}
return false;
}
}
</script>
</body>
You don't even need a onload handler for the page load when you add it to the very bottom of your document.
26
IF you do it through raw javascript you are going to need to add a onclick event to each anchor and an id to each li
<ul>
<li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li>
</ul>
that's your html change
function strikeThrough(id){
var li = document.getElementById(id)
li.style. textDecoration = "line-through"
}
thats your javascript function
I would recommend that you just include JQuery so that you don't have to add a ton of ids to you mark up
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
