Raw javascript instead of jquery (example follows)

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!

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;
    });
 });

Unfortunateley i don't know raw javascript very well, can someone convert this for me? I would be grateful.

Share Improve this question edited Feb 9, 2010 at 21:47 asked Feb 9, 2010 at 21:01 fractalbit 9632 gold badges12 silver badges17 bronze badges

3 "If it ain't broke..." You can convert it to pure Javascript, but you run the risk of breaking cross-browser compatibility. – Robert Harvey Commented Feb 9, 2010 at 21:03
I'd try to step through the JS code and see which jQuery functions are used for that script, and delete everything else. – Dor Commented Feb 9, 2010 at 21:10
@Robert Harvey: well generally speaking yes this is good advice. But what the OP is trying to achieve can be solved in a fairly straightforward browser independent way. (assuming basic DOM implementation) @Dor: if the OP is indeed not well versed in javascript, stepping through jQuery is not going to make him happy. Did you? I mean, no disrespect to jQuery intended - it is one of the greatest js libs on the planet, but I would not recommend it as a beginners exercise to analyze that code. – Roland Bouman Commented Feb 9, 2010 at 21:18
are you absolutely sure that your webpage will never change in the future and be that way forever? Jquery will come in handy if you ever want to add new things in the future. – Gordon Gustafson Commented Feb 9, 2010 at 21:29

Add a comment |

6 Answers 6

Sorted by: Reset to default 9

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?

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.

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

If you're never going to do more with your website, maybe it's overkill. Doing the equivalent of what that short blurb does in a cross-browser manner is a headache. That's the value of using jQuery: writing something once and having it usually work without too much hassle. If you think the extra 20KB of bandwidth for visitors to your page is an undue burden, then start reading up on event handlers, DOM, and CSS manipulation.

You say you don't know JS well...did you inherit this jQuery usage from someone else or did you copy it from an example somewhere?

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

Using jQuery for such a functions is not overkill, trust me. You will never now what else of jQuery neat feature that you might need in the future. jQuery is small enough in minified form, wouldn't make any differences for a page load.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Raw javascript instead of jquery (example follows) - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)