ansaurus

Question

How can I get an element by name with jquery?

Answer 1

A:

You can get the element in JQuery by using its ID attribute like this:

$("#tcol1").hide();

CalebHC 2009-07-10 01:09:39

Matches a single element only

Tommy 2009-07-10 01:10:32

Sorry about that. Just do what Ben S said.

CalebHC 2009-07-10 01:14:23

Yes that is true about the ID. As far as selecting by name, I think there was a post up here referring to Selectors/attributeEquals which was helpful.

Tommy 2009-07-10 01:21:16

Answer 2

+11 A:

$("#tcol1").hide(); looks for the element with ID tcol1 to hide.

Your IDs must be unique. When more than one element has the same ID behavior is undefined since the HTML is malformed.

Many elements can share the same class, which is why $(".bold").hide(); works.

If you know that you want to get the second <td> in each <tr> you could omit IDs, names and classes and use $("tr td:nth-child(2)") to select that. This solution would reduce the size of your markup.

Ben S 2009-07-10 01:10:10

Good point. I missed that. :p

CalebHC 2009-07-10 01:11:18

you missed the #

redsquare 2009-07-10 01:14:04

I added a way to do this without need for IDs, classes or names.

Ben S 2009-07-10 01:20:08

amended to show the #

redsquare 2009-07-10 01:27:48

Answer 3

+24 A:

you can use the attribute selector

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

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

Jon Erickson 2009-07-10 01:21:08

Thanks. .........

Tommy 2009-07-10 01:22:19

Answer 4

A:

You could get the array of elements by name the old fashioned way and pass that array to jQuery.

<html>
<head>
    <title>sandBox</title>
</head>
<body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function toggleByName() {
        var arrChkBox = document.getElementsByName("chName");
        $(arrChkBox).toggle();
    }
</script>

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)

<html>
<head>
    <title>sandBox</title>
</head>
<body>
    <table>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
    </table>
<input type="button" onclick="toggleByClass(true);" value="show"/>
<input type="button" onclick="toggleByClass(false);" value="hide"/>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function toggleByClass(bolShow) {
        if (bolShow) {
            $(".rowToToggle").show();
        } else {
            $(".rowToToggle").hide();
        }
    }
</script>

x13 2009-07-11 05:25:01

ansaurus

tags:

views:

answers:

How can I get an element by name with jquery?

related questions