Geek Answers Handbook

Raw javascript instead of jquery (example follows)

This is my first question. I have the following jquery code:

$(document).ready(function(){ $("a").click(function(){ $(this).parent("li").css({textDecoration: "line-through"}); return false; }); });

which works great. It hits the parent of any clicked anchor (in html there are many anchors and lists, not just one). But I want only this functionality, nothing more. Isn't it a surplus to include the entire jquery library?

Unfortunately, I do not know how I can work with javascript very well, can someone convert this for me? I will be grateful.

EDIT: Wow, I am amazed at the speed and quality of the answers! So first of all a big THANKS to all of you! I will either work on the jonathon solution (edit2: roland), or just turn on jquery. Thanks again!

+7
javascript jquery
source share
6 answers

The following will be achieved in an independent browser.

 <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>
+5
source share

Isn't it a surplus to include the full jquery library?

Tell me. You could serve a library hosted by Google that can already be cached on the client side.

In my opinion, to be consistent is the key. If you're used to jQuery, then why not keep using it? Your code will be easier to maintain.

You may find one of my earlier questions: When is it acceptable to use jQuery?

+9
source share

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 an onload handler to load the page when you add it to the very bottom of the document.

+2
source share

If you do this using raw javascript, you will need to add an onclick event for each anchor and an id for each li

 <ul> <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li> </ul>

what is your html change

 function strikeThrough(id){ var li = document.getElementById(id) li.style. textDecoration = "line-through" }

thats your javascript function

I would recommend you just turn on jQuery so you don't have to add a ton of identifiers for you.

+1
source share

If you’re never going to do more with your site, this may be overkill. Running the equivalent of what this short cross-browser ad does is a headache. This is the meaning of using jQuery: to write something once and have it, as a rule, work without unnecessary hassle. If you think that additional 20 Kbytes of bandwidth for visitors to your page is an unreasonable burden, start reading event handlers, DOM and CSS.

You say you don’t know JS well ... did you inherit this use of jQuery from someone else, or did you copy it from an example somewhere?

+1
source share

Converting a seems like a simple function from jquery code to javascript source code, sometimes it will catch you with a cross-browser bug, bloat functions and the possibilities that your needs will grow in the future.

Using jQuery for such functions is not redundant, trust me. Now you'll never be what else might be useful for jQuery, which you may need in the future. jQuery is small enough in a reduced form, it will not make any difference to load the page.

+1
source share

More articles:


All Articles