converting javascript to jquery

Question

I have this JavaScript functions that I want to convert to jquery but I can't understand jquery. It uses the document.getElementsByName a lot so I would like to know how to convert the document.getElementsByName into jquery.

function getElements(name){
    if (document.getElementsByName(name)[0].className == "visible"){
        document.getElementsByName(name)[0].className = "hidden";
    } else {
        if(document.getElementsByClassName('visible')[0] != null){
            document.getElementsByClassName('visible')[0].className = "hidden";
        }
        document.getElementsByName(name)[0].className = "visible";
    }
}

There are a lot of things that you can be told on this, but I think you need to start learning jQuery rather than asking questions. This should be a better place for starting jQuery (api.jquery.com/category/core) — Naveed Butt
– Naveed Butt, Commented Sep 12, 2013 at 5:57
@NaveedButt the specific question is how to convert getElementByName. While a tutorial is a good idea, this question does not appear too broad to me. — John Dvorak
– John Dvorak, Commented Sep 12, 2013 at 5:58

bipen · Accepted Answer · 2013-09-12 05:53:21Z

4

you can try with attribute selector...

 $('[name="'+name+'"]')  //for name selector
 $('.visible') //for class selector

answered Sep 12, 2013 at 5:53

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bipen Over a year ago

glad it helped.... you can accept any of the answer if you think that helped... anyways happy coding.. :)

Zaheer Ahmed · Accepted Answer · 2013-09-12 06:02:23Z

3

You should try because when you try practicing you actually are learning:

document.getElementsByName in jQuery $("[name=Name]");
document.getElementsById in jQuery $("#IdofElement");
document.getElementsByClass in jQuery $(".ClassofElement");

Here are some tutorials:

edited Sep 12, 2013 at 6:02

answered Sep 12, 2013 at 5:55

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

2 Comments

John Dvorak Over a year ago

Why are you not linking to the official jQuery tutorial (I don't mean the documentation)?

iConnor Over a year ago

@EddieCastle You would go to google, and search "how to get elements by name jQuery" and then you would search "How to get elements by class name jQuery" then you would search "how to add a class to a element jQuery" Then you would put together what you have learned to create your functionality.

Ganesh Pandhere · Accepted Answer · 2013-09-12 05:52:41Z

0

You can refer to the below syntax for your reference.

$('[name=tcol1]') // matches exactly 'tcol1'

$('[name^=tcol]') // matches those that begin with 'tcol'

answered Sep 12, 2013 at 5:52

Ganesh Pandhere

1,6528 silver badges12 bronze badges

Comments

sudhansu63 · Accepted Answer · 2013-09-12 06:07:50Z

0

Try this.

function getElements(name1){
    if ($("[name='" + name1 + "'").hasClass("visible")){
        $("[name='" + name1 + "'").removeClass("visible").addClass("hidden");
    } else {
        if($(".visible") != null){
            $(".visible").addClass("hidden");
        }
        $("[name='" + name1 + "'").removeClass("visible").addClass("visible");
    }
}

edited Sep 12, 2013 at 6:07

answered Sep 12, 2013 at 5:57

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

4 Comments

Barmar Over a year ago

His original code replaces the class, you're adding a class without removing the old one. You'll end up with an element that's both hidden and visible, which is probably not desired.

Eddie Castle Over a year ago

This is exactly how I wanted the code thanks, with the exception that on line 8 it would be $("[name='" + name1 + "'").removeClass("hidden").addClass("visible");

Eddie Castle Over a year ago

Nevermind, Barmar is right, it ends up with a hidden and visible class.

Eddie Castle Over a year ago

I added .removeClass("visible") to the end of line six and it worked

Collectives™ on Stack Overflow

converting javascript to jquery

4 Answers 4

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related