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

1224

有一个我要扩展和隐藏的表列：

td当我按类而不是按元素的名称选择jQuery时，jQuery似乎隐藏了这些元素。

例如，为什么这样做： 

$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element 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>
javascript  jquery  html  dom  jquery-selectors 
— TTT
source
7
问题与内容不符。ID和名称是不同的属性，并且选择的方式也不同
— Mark W
12
具有相同ID的元素违反W3C标准；即重复的ID是“否”。
— Steve Tauber

Answers:

2174

您可以使用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'
— 乔恩·埃里克森
source
1
出于好奇，一个人如何将其写为NOT tcol1，就像他们想隐藏除名为tcol1的列以外的其他列一样？
— HPWD
25
@Varun-您可以省略td ...例如$（'[name ^ = tcol]'）将匹配所有以'tcol'开头的'name'属性的元素
— Jon Erickson
我必须像$（'td [name = tcol1]'）一样使用它-td和[]之间没有空格，它返回了NULL。
— akki 2014年
@DougMolineux事实上，他是匹配的前一个名字的修复。
— mareoraft
7
@HPWD，$("td:not([name='tcol1'])")例如，您将使用：not选择器。您可以在这个小提琴中
— JohannesB
224

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

var value = $("[name='nameofobject']");
— 用户名
source
但是您应该使用上面的代码，以免错过qoutations！祝你好运，欢迎来到Stackoverflow社区:)
— Afzaal Ahmad Zeeshan 2013年
7
这是不是至少为我工作-但下面的语句作品var value = $("[name=nameofobject]");
— Pranav
2
令人惊讶的是，这是在最初接受的答案之后的4年内获得17次投票的
— Huangism
6
现在21票赞成投票...也许是因为答案不如'td [name = tcol1]'令人困惑，尤其是因为不需要td并因此导致像我这样的人走错了路
— Chris Sprague
2
我的输入名称有一个[]，如下所示：<input name="itemid[]">。因此，由于正确使用了引号，因此此答案比接受的答案更完美。
— Sunish Menon
62

如果您有类似的东西：

<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">
展开摘要

— 安德烈亚斯·L。
source
26

您可以通过老式方式命名元素数组，并将该数组传递给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>
展开摘要

— 你的朋友肯
source
24

您可以使用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>
展开摘要

— Shrikant D
source
+1给出的唯一示例是选择一个包括类型的名称字段并将结果限制在id部分内。
— SharpC 2015年
我同意。您的页面中可以有多种形式，限制为正确的形式是一个好主意。
— 卡马（Kar.ma）'16
15

框架通常使用形式的方括号名称，例如：

<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]\"]")
— 尼古拉
source
5

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

— 来宾
source
5

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

$('td[name="tcol1"]')
— 克里斯·J
source
例如，如果字段名称'td[name="nested[fieldName]"]'
— relytmcd
这是真的。当遇到基于属性的选择器元素而没有正确引用时，较新版本的jQuery（3.2.1版）更有可能失败。
— HoldOffHunger
3

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

$("#tcol1").hide();
— CalebHC
source
4
仅匹配单个元素
— TTT
2
对于那个很抱歉。照本·森说的去做。
— CalebHC
是的，关于ID的说法是正确的。至于按名称选择，我认为这里有一篇提到Selectors / attributeEquals的帖子很有帮助。
— TTT
1
也许问题已被编辑，但是他现在正在请求名称参考，但是是的，单个元素可以使用id选择器
— nckbrz 2014年
姓名问题实际上
— Prathamesh更多
3

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

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

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

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

总而言之，如果您不能按名称进行选择，则可以使用复杂的jQuery选择器并接受任何相关的性能影响，或者使用类选择器。

您始终可以通过包括表名来限制jQuery范围，即$（'＃tableID> .bold'）

那应该限制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); 
}
— 史蒂夫·柴尔德斯
source
有点罗word的答案，但这从根本上是正确的整体方法。
— HoldOffHunger
2
可能有点罗word，但比起一条解释不多的单行，最好在建议后面多一点解释和推理！;）当有人不熟悉某事物并试图理解为什么a）它起作用以及b）它如何起作用时，它很有用
— Steve Childs
-13

您可以使用以下功能：

get.elementbyId();
— Pratyush Goyal
source
2
OP希望通过名称获取，而不是id。那是get.elementbyId()什么？你是说document.getElementById()吗
— barbsan
8
不，他要求按名称选择元素。
— barbsan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.