我有一个表列，我正在尝试展开和隐藏。当我按类而不是按元素名称选择jQuery时，jQuery似乎隐藏了＜td＞元素。
例如：
$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.
注意下面的HTML。第二列对所有行具有相同的名称。如何使用name属性创建此集合？
<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>
当前回答
您可以使用JQuery中的ID属性获取该元素，如下所示：
$("#tcol1").hide();
其他回答
表演
今天（2020.06.16），我在Chrome 83.0、Safari 13.1.1和Firefox 77.0上对MacOs High Sierra上选择的解决方案进行了测试。
结论
按名称获取元素
getElementByName（C）是适用于大小数组的所有浏览器的最快解决方案，但我可能是某种惰性加载解决方案，或者它使用带有名称元素对的内部浏览器哈希缓存混合js-jquery解决方案（B）比querySelectorAll（D）解决方案更快纯jquery解决方案（A）是最慢的
按名称获取行并隐藏它们（我们从比较中排除预先计算的本地解决方案（I）-理论上最快）-它用作参考）
令人惊讶的是，混合js-jquery解决方案（F）在所有浏览器上都是最快的令人惊讶的是，对于大表（！！！），预计算的解决方案（I）比jquery（E，F）解决方案慢-我检查了.ide（）jquery方法在隐藏元素上设置了style“default:none”-但看起来它们找到的方法比element.style.display='none'更快jquery（E）解决方案在大型表上非常快速jquery（E）和querySelectorAll（H）解决方案对于小表来说是最慢的getElementByName（G）和querySelectorAll（H）解决方案对于大表来说非常慢
细节
我对按名称（A、B、C、D）读取元素执行两个测试，并隐藏这些元素（E、F、G、H、I）
小表-3行-您可以在这里运行测试大表-1000行-您可以在这里运行测试
下面的代码段显示了使用过的代码
//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函数A（）{return$（'[name=tcol1]'）；}函数B（）{return$（document.getElementsByName（“tcoll1”））}函数C（）{return document.getElementsByName（“tcoll1”）}函数D（）{return document.querySelectorAll（'[name=tcol1]'）}函数E（）{$（'[name=tcol1''）.ide（）；}函数F（）{$（document.getElementsByName（“tcoll1”））.ide（）；}函数G（）{document.getElementsByName（“tcol1”）.forEach（e=>e.style.deisplay='none'）；}函数H（）{document.querySelectorAll（'[name=tcol1''）.forEach（e=>e.style.display='none'）；}函数I（）{让elArr=[…document.getElementsByName（“tcoll1”）]；设长度=elArr.length对于（设i=0；i<length；i++）elArr[i].style.display='none'；}// -----------//测试// -----------函数reset（）｛$（'td[name=tcol1'）.show（）；｝[A，B，C，D].forEach（f=>console.log（`${f.name}行：${f（）.length}`））；<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script><div>此代码段仅显示使用过的代码</div><表><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr></table><button onclick=“E（）”>E:隐藏</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（）”>重置</button>
Chrome上的示例结果
您可以通过以下方式使用jQuery中的name元素从输入字段中获取name值：
var firstname=jQuery（“#form1 input[name=firstname]”）.val（）//退货ABCDvar lastname=jQuery（“#form1 input[name=lastname]”）.val（）//返回XYZconsole.log（firstname）；console.log（姓氏）；<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>
可以使用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'
框架通常以如下形式使用括号名称：
<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]\"]")
您可以用老式的方式命名元素数组，并将该数组传递给jQuery。
函数toggleByName（）{var arrChkBox=文档.getElementsByName（“chName”）；$（arrChkBox）.tggle（）；}<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”属性的时间应该是复选框或单选输入。
或者您可以向元素添加另一个类以供选择。（这是我会做的）
函数切换ByClass（bolShow）{if（bolShow）{$（“.rowToToToggle”）.show（）；}其他{$（“.rowToToToggle”）.hide（）；}}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><html><head><title>sandBox</title></head><body><表><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr></table><input type=“button”onclick=“toggleByClass（true）；”value=“show”/><input type=“button”onclick=“toggleByClass（false）；”value=“hide”/></body></html>
