Personally, what I’ve done in the past is give them a common class id and used that to select them. It may not be ideal as they have a class specified that may not exist, but it makes the selection a hell of a lot easier. Just make sure you’re unique in your classnames.
i.e. for the example above I’d use your selection by class. Better still would be to change the class name from bold to ‘tcol1’, so you don’t get any accidental inclusions into the jQuery results. If bold does actually refer to a CSS class, you can always specify both in the class property – i.e. ‘class=”tcol1 bold”‘.
In summary, if you can’t select by Name, either use a complicated jQuery selector and accept any related performance hit or use Class selectors.
You can always limit the jQuery scope by including the table name i.e.
$(‘#tableID > .bold’)
That should restrict jQuery from searching the “world”.
Its could still be classed as a complicated selector, but it quickly constrains any searching to within the table with the ID of ‘#tableID’, so keeps the processing to a minimum.
An alternative of this if you’re looking for more than 1 element within #table1 would be to look this up separately and then pass it to jQuery as this limits the scope, but saves a bit of processing to look it up each time.
var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
var row1 = rows[0];
var firstRowCells = $('td',row1);
}
The most basic concept of jQuery is to “select some elements and do something with them.” jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit the Selectors documentation on api.jquery.com.
link Selecting Elements by ID
1 |
|
link Selecting Elements by Class Name
link Selecting Elements by Attribute
1 |
|
link Selecting Elements by Compound CSS Selector
1 |
|
link Selecting Elements with a Comma-separated List of Selectors
1 |
|
link Pseudo-Selectors
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Note: When using the :visible
and :hidden
pseudo-selectors, jQuery tests the actual visibility of the element, not its CSS visibility
or display
properties. jQuery looks to see if the element’s physical height and width on the page are both greater than zero.
However, this test doesn’t work with <tr>
elements. In the case of <tr>
jQuery does check the CSS display
property, and considers an element hidden if its display
property is set to none
.
Elements that have not been added to the DOM will always be considered hidden, even if the CSS that would affect them would render them visible. See the Manipulating Elements section to learn how to create and add elements to the DOM.
link Choosing Selectors
Choosing good selectors is one way to improve JavaScript’s performance. Too much specificity can be a bad thing. A selector such as #myTable thead tr th.special
is overkill if a selector such as #myTable th.special
will get the job done.
link Does My Selection Contain Any Elements?
Once you’ve made a selection, you’ll often want to know whether you have anything to work with. A common mistake is to use:
This won’t work. When a selection is made using $()
, an object is always returned, and objects always evaluate to true
. Even if the selection doesn’t contain any elements, the code inside the if
statement will still run.
The best way to determine if there are any elements is to test the selection’s .length
property, which tells you how many elements were selected. If the answer is 0, the .length
property will evaluate to false
when used as a boolean value:
1 2 3 4 |
|
link Saving Selections
jQuery doesn’t cache elements for you. If you’ve made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.
Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.
A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you’ll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don’t magically update when the DOM changes.
link Refining & Filtering Selections
Sometimes the selection contains more than what you’re after. jQuery offers several methods for refining and filtering selections.
1 2 3 4 5 6 |
|
link Selecting Form Elements
jQuery offers several pseudo-selectors that help find elements in forms. These are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors.
link :checked
Not to be confused with :checkbox, :checked
targets checked checkboxes, but keep in mind that this selector works also for checked radio buttons, and <select>
elements (for <select>
elements only, use the :selected
selector):
The :checked
pseudo-selector works when used with checkboxes, radio buttons and selects.
link :disabled
Using the :disabled
pseudo-selector targets any <input>
elements with the disabled
attribute:
In order to get the best performance using :disabled
, first select elements with a standard jQuery selector, then use .filter( ":disabled" )
, or precede the pseudo-selector with a tag name or some other selector.
link :enabled
Basically the inverse of the :disabled pseudo-selector, the :enabled
pseudo-selector targets any elements that do not have a disabled
attribute:
In order to get the best performance using :enabled
, first select elements with a standard jQuery selector, then use .filter( ":enabled" )
, or precede the pseudo-selector with a tag name or some other selector.
link :input
Using the :input
selector selects all <input>
, <textarea>
, <select>
, and <button>
elements:
link :selected
Using the :selected
pseudo-selector targets any selected items in <option>
elements:
In order to get the best performance using :selected
, first select elements with a standard jQuery selector, then use .filter( ":selected" )
, or precede the pseudo-selector with a tag name or some other selector.
link Selecting by type
jQuery provides pseudo selectors to select form-specific elements according to their type:
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file
For all of these there are side notes about performance, so be sure to check out the API docs for more in-depth information.
Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article
In this article, we will learn to get the selected element by name in jQuery. An element can be selected by the name attribute using 2 methods:
- By using the name selector method
- By using JavaScript to get the element by name and passing it on to jQuery
We will understand both methods with the help of examples.
Method 1: Using the name selector method
The name attribute selector can be used to select an element by its name. This selector selects elements that have the value exactly equal to the specified value.
Syntax:
[name="nameOfElement"]
Example: This example illustrates the use of the name selector method to select the specific element.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to select an element by name with jQuery?
</
title
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
b
>How to select an element by name with jQuery?</
b
>
<
p
>
The textbox below has the <
b
>name attribute 'address'.</
b
>
<
form
>
<
textarea
rows
=
"4"
cols
=
"40"
name
=
"address"
></
textarea
>
</
form
>
</
p
>
<
p
>
The textbox below has the
<
b
>name attribute 'area'.</
b
>
<
form
>
<
input
type
=
"text"
name
=
"area"
>
</
form
>
</
p
>
<
p
>Click on the button to hide the input with
the name 'area'</
p
>
<
button
onclick
=
"selectByName()"
>
Click to hide the area input
</
button
>
<
script
src
=
</
script
>
<
script
type
=
"text/javascript"
>
function selectByName() {
element = $('[name="area"]');
//hide the element
element.hide();
}
</
script
>
</
center
>
</
body
>
</
html
>
Output:
name selector Method
Method 2: Using JavaScript to get the element by name and pass it on to jQuery
The JavaScript getElementsByName() method can be used to select the required element and this can be passed to a jQuery function to use it further as a jQuery object.
Syntax:
selector = document.getElementsByName('nameOfElement'); element = $(selector);
Example: This example illustrates the use of the getElementsByName() method to get the collection of all elements of a particular document by name
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to select an element by name with jQuery?
</
title
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>GeeksforGeeks</
h1
>
<
b
>How to select an element by name with jQuery?</
b
>
<
p
>
The textbox below has the
<
b
>name attribute 'address'.</
b
>
<
form
>
<
textarea
rows
=
"4"
cols
=
"40"
name
=
"address"
></
textarea
>
</
form
>
</
p
>
<
p
>
The textbox below has the
<
b
>name attribute 'area'.</
b
>
<
form
>
<
input
type
=
"text"
name
=
"area"
>
</
form
>
</
p
>
<
p
>
Click on the button to hide the
input with the name 'address'
</
p
>
<
button
onclick
=
"selectByName()"
>
Click to hide the address input
</
button
>
<
script
src
=
</
script
>
<
script
type
=
"text/javascript"
>
function selectByName() {
selector = document.getElementsByName('address');
element = $(selector);
// hide the element
element.hide();
}
</
script
>
</
center
>
</
body
>
</
html
>
Output:
Getting the element by their name
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. Please refer to the jQuery Tutorial and jQuery Examples article for further details.
Last Updated :
24 Nov, 2021
Like Article
Save Article
Description
“$(“input[name=myname]”)” Selects all elements matched by <input> that have a name value exactly equal to myname..
Syntax
Here is the simple syntax to use this selector −
$("element[attribute-name=attribute-value]")
Parameters
Here is the description of all the parameters used by this selector −
-
element − Any standard HTML tag name like div, p, em, img, li etc.
-
attribute-name − attribute of above element.
-
attribute-value − value of attribute of above element.
Returns
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
<html> <head> <title>The Selector Example</title> <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { /* Selects all elements matched by <input> that have a name value exactly equal to username.*/ $("input[name='username']").val("Enter Name!"); }); </script> </head> <body> <input type = "text" name = "username"></input> <br/><br/> <input type = "text" name = "password"></input> <br/><br/> <input type = "text" name = "email"></input> </body> </html>
This will produce following result −
jqueryexamples_selectors.htm
This post will discuss how to get elements by name using JavaScript and jQuery.
1. Using jQuery
You can use the Attribute Equals Selector ([name='value']
) to select elements with the given name in jQuery. Note, this might return more than one element since one can apply the same name to multiple elements within the document.
$(document).ready(function() { var languages = $(“[name=’language’]”); for (var lang of languages) { console.log(lang.value); } }); |
HTML
<p>Select your preferred language:</p> <div> <input type=“radio” id=“english” name=“language” value=“english” checked> <label for=“english”>English</label> <input type=“radio” id=“hindi” name=“language” value=“hindi”> <label for=“hindi”>Hindi</label> <input type=“radio” id=“spanish” name=“language” value=“spanish”> <label for=“spanish”>Spanish</label> </div> |
Edit in JSFiddle
2. Using JavaScript
In pure JavaScript, you can use the native getElementsByName() method, which returns the NodeList
of all elements having the given name.
JS
var languages = document.getElementsByName(“language”); for (var lang of languages) { console.log(lang.value); } |
HTML
<p>Select your preferred language:</p> <div> <input type=“radio” id=“english” name=“language” value=“english” checked> <label for=“english”>English</label> <input type=“radio” id=“hindi” name=“language” value=“hindi”> <label for=“hindi”>Hindi</label> <input type=“radio” id=“spanish” name=“language” value=“spanish”> <label for=“spanish”>Spanish</label> </div> |
Edit in JSFiddle
Alternatively, you can use the querySelectorAll() method to get all elements within the document having the given name.
JS
var languages = document.querySelectorAll(“[name=’language’]”); for (var lang of languages) { console.log(lang.value); } |
HTML
<p>Select your preferred language:</p> <div> <input type=“radio” id=“english” name=“language” value=“english” checked> <label for=“english”>English</label> <input type=“radio” id=“hindi” name=“language” value=“hindi”> <label for=“hindi”>Hindi</label> <input type=“radio” id=“spanish” name=“language” value=“spanish”> <label for=“spanish”>Spanish</label> </div> |
Edit in JSFiddle
That’s all about getting an element by name in JavaScript and jQuery.
Thanks for reading.
Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and help us grow. Happy coding 🙂