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

Posted 2023-02-21

技术标签:

【中文标题】如何使用 jQuery 按名称选择元素？【英文标题】：How can I select an element by name with jQuery? 【发布时间】：2010-11-09 14:00:30 【问题描述】：

我有一个表格列，我正在尝试展开和隐藏。当我通过class 选择它而不是通过元素的name 选择它时，jQuery 似乎隐藏了<td> 元素。

例如：

$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.

注意下面的 html。第二列的所有行都具有相同的name。如何使用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>

【问题讨论】：

问题与内容不匹配。 ID和名称是不同的属性，选择的方式也不同拥有相同ID的元素是违反W3C标准的；即重复的 ID 是不可以的。 CSS specification 包含一个新的列组合器，因此如果您有 <colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>，很快您就可以简单地选择 document.querySelectorAll("td || col.secondColumn")。 【参考方案1】：

您可以使用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'

【讨论】：

@Varun - 你可以省略 td... 例如 $('[name^=tcol]') 将匹配所有具有属性 'name' 且值以开头的元素'tcol'【参考方案2】：

可以使用[attribute_name=value] 方式选择任何属性。见样例here：

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

【讨论】：

【参考方案3】：

如果你有类似的东西：

<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 );
);

sn-p：

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

【讨论】：

【参考方案4】：

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

注意：您唯一有理由使用“名称”属性的情况应该是复选框或单选输入。

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

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>

【讨论】：

【参考方案5】：

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

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>

【讨论】：

【参考方案6】：

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

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

【讨论】：

【参考方案7】：

我已经这样做了，它有效：

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

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

【讨论】：

【参考方案8】：

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

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

【讨论】：

例如如果字段名称是'td[name="nested[fieldName]"]' 这是非常正确的。当遇到没有正确引用的基于属性的选择器元素时，较新版本的 jQuery（v. 3.2.1）更有可能失败。【参考方案9】：

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

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

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

即对于上面的示例，我将按类别使用您的选择。更好的办法是将类名从粗体更改为“tcol1”，这样您就不会在 jQuery 结果中意外包含任何内容。如果粗体实际上确实引用了一个 CSS 类，您始终可以在类属性中同时指定两者 - 即 'class="tcol1 bold"'。

总之，如果你不能按名称选择，要么使用复杂的 jQuery 选择器并接受任何相关的性能损失，要么使用类选择器。

您始终可以通过包含表名来限制 jQuery 范围，即 $('#tableID > .bold')

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

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

如果您要在 #table1 中查找超过 1 个元素，则另一种方法是单独查找，然后将其传递给 jQuery，因为这会限制范围，但会节省一些处理来查找每个元素时间。

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

【讨论】：

【参考方案12】：

性能

今天 (2020.06.16) 我在 MacOs High Sierra 上的 Chrome 83.0、Safari 13.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) 解决方案对于大表来说非常慢

详情

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

小表 - 3 行 - 你可以运行测试HERE 大表 - 1000 行 - 你可以运行测试 HERE

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

//https://***.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>

Chrome 上的示例结果

【讨论】：

很好的信息，但是很多东西没有回答这个问题，只是相关的知识【参考方案13】：

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