admin管理员组文章数量:1125612
I have a table column I’m trying to expand and hide. jQuery seems to hide the <td> elements when I select it by class but not by the element’s name.
For example:
$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.
Note the HTML below. The second column has the same name for all rows. How could I create this collection using the name attribute?
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
I have a table column I’m trying to expand and hide. jQuery seems to hide the <td> elements when I select it by class but not by the element’s name.
For example:
$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.
Note the HTML below. The second column has the same name for all rows. How could I create this collection using the name attribute?
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
15 Answers
Reset to default 2763You can use the jQuery attribute selector:
$('td[name="tcol1"]') // Matches exactly 'tcol1'
$('td[name^="tcol"]' ) // Matches those that begin with 'tcol'
$('td[name$="tcol"]' ) // Matches those that end with 'tcol'
$('td[name*="tcol"]' ) // Matches those that contain 'tcol'
Any attribute can be selected using [attribute_name=value] way.
See the sample here:
var value = $("[name='nameofobject']");
If you have something like:
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">
You can read all like this:
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});
The snippet:
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">You could get the array of elements by name the old fashioned way and pass that array to jQuery.
function toggleByName() {
var arrChkBox = document.getElementsByName("chName");
$(arrChkBox).toggle();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>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)
function toggleByClass(bolShow) {
if (bolShow) {
$(".rowToToggle").show();
} else {
$(".rowToToggle").hide();
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>You can get the name value from an input field using name element in jQuery by:
var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ
console.log(firstname);
console.log(lastname);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
<input type="text" name="firstname" value="ABCD"/>
<input type="text" name="lastname" value="XYZ"/>
</form>Frameworks usually use bracket names in forms, like:
<input name=user[first_name] />
They can be accessed by:
// in JS:
this.querySelectorAll('[name="user[first_name]"]')
// in jQuery:
$('[name="user[first_name]"]')
// or by mask with escaped quotes:
this.querySelectorAll("[name*=\"[first_name]\"]")
I've done like this and it works:
$('[name="tcol1"]')
https://api.jquery.com/attribute-equals-selector/
You forgot the second set of quotes, which makes the accepted answer incorrect:
$('td[name="tcol1"]')
You can use any attribute as selector with [attribute_name=value].
$('td[name=tcol1]').hide();
Here's a simple solution: $('td[name=tcol1]')
Performance
Today (2020.06.16) I perform tests for chosen solutions on MacOs High Sierra on Chrome 83.0, Safari 13.1.1 and Firefox 77.0.
Conclusions
Get elements by name
getElementByName(C) is fastest solution for all browsers for big and small arrays - however I is probably some kind of lazy-loading solution or It use some internal browser hash-cache with name-element pairs- mixed js-jquery solution (B) is faster than
querySelectorAll(D) solution - pure jquery solution (A) is slowest
Get rows by name and hide them (we exclude precalculated native solution (I) - theoretically fastest) from comparison - it is used as reference)
- surprisingly the mixed js-jquery solution (F) is fastest on all browsers
- surprisingly the precalculated solution (I) is slower than jquery (E,F) solutions for big tables (!!!) - I check that .hide() jQuery method set style
"default:none"on hidden elements - but it looks that they find faster way of do it thanelement.style.display='none' - jquery (E) solution is quite-fast on big tables
- jquery (E) and querySelectorAll (H) solutions are slowest for small tables
- getElementByName (G) and querySelectorAll (H) solutions are quite slow for big tables
Details
I perform two tests for read elements by name (A,B,C,D) and hide that elements (E,F,G,H,I)
- small table - 3 rows - you can run test HERE
- big table - 1000 rows - you can run test HERE
Snippet below presents used codes
//https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery#
// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1
function A() {
return $('[name=tcol1]');
}
function B() {
return $(document.getElementsByName("tcol1"))
}
function C() {
return document.getElementsByName("tcol1")
}
function D() {
return document.querySelectorAll('[name=tcol1]')
}
function E() {
$('[name=tcol1]').hide();
}
function F() {
$(document.getElementsByName("tcol1")).hide();
}
function G() {
document.getElementsByName("tcol1").forEach(e=>e.style.display='none');
}
function H() {
document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none');
}
function I() {
let elArr = [...document.getElementsByName("tcol1")];
let length = elArr.length
for(let i=0; i<length; i++) elArr[i].style.display='none';
}
// -----------
// TEST
// -----------
function reset() { $('td[name=tcol1]').show(); }
[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
</table>
<button onclick="E()">E: hide</button>
<button onclick="F()">F: hide</button>
<button onclick="G()">G: hide</button>
<button onclick="H()">H: hide</button>
<button onclick="I()">I: hide</button><br>
<button onclick="reset()">reset</button>Example results on Chrome
2 more examples:
<input type="text" name="foo">
<input type="text" name="foo[bar]">
with:
$('[name="foo"]');
$('[name="foo\\[bar\\]"]');
snippet:
$('#copy').on('click', () => {
let $from = $('[name="foo"]');
let $to = $('#result-1');
$to.val($from.val());
$from = $('[name="foo\\[bar\\]"]');
$to = $('#result-2');
$to.val($from.val());
});<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<p>
<input type="text" name="foo" value="copy name='foo'">
<input type="text" disabled id="result-1" placeholder="i'm disabled">
</p>
<p>
<input type="text" name="foo[bar]" value="copy name='foo[bar]'">
<input type="text" disabled id="result-2" placeholder="i'm disabled">
</p>
<input type="button" id="copy" value="copy values">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);
}
You can get the element in JQuery by using its ID attribute like this:
$("#tcol1").hide();
You can use the function:
get.elementbyId();
本文标签： javascriptHow can I select an element by name with jQueryStack Overflow
版权声明：本文标题：javascript - How can I select an element by name with jQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736667326a1946732.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
document.querySelectorAll("td || col.secondColumn")if you have a<colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>. – Sebastian Simon Commented Mar 18, 2021 at 11:31