小开

您可以通过使用其ID属性在JQuery中获取元素，如下所示：

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

小开

最佳答案

您可以使用jQuery属性选择器：

$('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'

小开

您可以通过老式的方式按名称获取元素数组并将该数组传递给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>

注意：您唯一有理由使用“name”属性的时候应该是复选框或单选输入。

或者你可以向元素中添加另一个类以供选择。（这就是我会做的）

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>

小开

可以使用[attribute_name=value]方式选择任何属性。查看示例这里：

var value = $("[name='nameofobject']");

小开

如果你有类似的东西：

<input type="checkbox" name="mycheckbox" value="11" checked=""><input type="checkbox" name="mycheckbox" value="12">

你可以这样阅读：

jQuery("input[name='mycheckbox']").each(function() {console.log( this.value + ":" + this.checked );});

代码片段：

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">

小开

就我个人而言，我过去所做的是给他们一个通用的类id并用它来选择它们。这可能不理想，因为他们指定了一个可能不存在的类，但它使选择变得容易得多。只要确保你的类名是唯一的。

即对于上面的例子，我会使用你按类选择的选项。更好的方法是将类名从粗体更改为“tcol1”，这样你就不会在jQuery结果中得到任何意外的包含。如果粗体确实引用了一个CSS类，你可以随时在class属性中指定两者-即'class="tcol1的粗体"'。

总之，如果您不能按名称选择，请使用复杂的jQuery选择器并接受任何相关的性能命中或使用类选择器。

您始终可以通过包含表名来限制jQuery范围，例如：$（'#tableID>粗体字）

这应该会限制jQuery搜索“世界”。

它仍然可以被归类为一个复杂的选择器，但它很快将任何搜索限制在ID为“#tableID”的表内，因此将处理保持在最低限度。

如果您在#table1中查找多个元素，另一种方法是单独查找，然后将其传递给jQuery，因为这限制了范围，但每次查找都节省了一些处理。

var tbl = $('#tableID');var boldElements = $('.bold',tbl);var rows = $('tr',tbl);if (rows.length) {var row1 = rows[0];var firstRowCells = $('td',row1);}

小开

我是这样做的，它奏效了：

$('[name="tcol1"]')

https://api.jquery.com/attribute-equals-selector/

小开

您可以通过以下方式使用jQuery中的name元素从输入字段中获取名称值：

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCDvar lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZconsole.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>

小开

框架通常在表单中使用括号名称，例如：

<input name=user[first_name] />

它们可以通过以下方式访问：

// 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]\"]")

小开

您可以使用任何属性作为[attribute_name=value]的选择器。

$('td[name=tcol1]').hide();

小开

这里有一个简单的解决方案：$('td[name=tcol1]')

小开

你忘记了第二组引号，这使得接受的答案不正确：

$('td[name="tcol1"]')

小开

您可以使用该功能：

get.elementbyId();

小开

性能

今天（2020.06.16），我在Chrome83.0、Safari13.1.1和Firefox 77.0上对所选解决方案进行测试。

结论

按名称获取元素

getElementByName（C）是所有浏览器对大小数组的最快解决方案-但我可能是某种延迟加载解决方案，或者它使用一些内部浏览器哈希缓存与名称元素对
混合js-jQuery解决方案（B）比querySelectorAll（D）解决方案更快
纯jQuery解决方案（A）最慢

按名称获取行并隐藏它们（我们从比较中排除预计算的本机解决方案（I）-理论上最快）-它被用作参考）

令人惊讶的是，混合js-jQuery解决方案（F）在所有浏览器上都是最快的
令人惊讶的是，对于大表（！！！），预计算的解决方案（I）比jQuery（E， F）解决方案慢-我检查了隐藏元素上的. hide（）jQuery方法设置样式"default:none"-但看起来他们找到了比element.style.display='none'更快的方法
jQuery（E）解决方案在大表上非常快
jQuery（E）和querySelectorAll（H）解决方案对于小表来说最慢
getElementByName（G）和querySelectorAll（H）解决方案对于大表来说非常慢

详情

我对按名称读取元素（一个、B、C、D）并隐藏该元素（E、F、G、H、I）执行两个测试

小表-3行-您可以运行test这里
大表-1000行-您可以运行test这里

下面的片段显示了使用的代码

//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.lengthfor(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>

关于Chrome的示例结果

如何使用jQuery按名称选择元素？

性能

结论

详情