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

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

例如，为什么这样做：

$(".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>


评论

问题与内容不符。 ID和名称是不同的属性，并且选择的方式不同
具有相同ID的元素违反W3C标准；即重复的ID为No.

#1 楼

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


评论

出于好奇，一个人如何将其写为NOT tcol1，就像他们想隐藏tcol1以外的其他列一样呢？

– HPWD
2012年2月3日在17:52


@Varun-您可以省略td ...例如$（'[name ^ = tcol]'）将匹配所有具有'name'属性且其值以'tcol'开头的元素

–乔恩·埃里克森（Jon Erickson）
2012年7月9日下午6:36
我不得不像$（'td [name = tcol1]'）一样使用它-td和[]之间没有空格，它返回了NULL。

– akki
2014-12-17 11:14


@DougMolineux实际上，他正在匹配名称的前缀。

– maroreoraft
15年10月17日在16:51
@HPWD您可以使用：not选择器，例如$（“ td：not（[name ='tcol1']）”）。您可以在这个小提琴中看到它

– JohannesB
16年5月11日在11:51

#2 楼

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

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


评论

但您应该使用上面的代码，以免错过qoutations！祝你好运，欢迎来到Stackoverflow社区:)

– Afzaal Ahmad Zeeshan
2013年9月22日19:11
至少对我来说这是行不通的-但是下面的语句起作用var value = $（“ [name = nameofobject]”）;

–普拉纳夫
2014-09-22 6:28


令人惊讶的是，这是在最初接受的答案发布4年后获得17次投票的

–黄种人
2015年3月25日在20:41
现在21票赞成...也许是因为答案比'td [name = tcol1]'少混乱，尤其是因为不需要td并因此导致像我这样的人走错了路

–克里斯·斯普拉格（Chris Sprague）
2015年6月9日下午6:03
我的输入名称有一个[]，如下所示：。因此，由于正确使用了引号，因此此答案比接受的答案更完美。

– Sunish Menon
16年7月30日在7:48

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


代码段： 




 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>




评论

+1给出的唯一示例选择一个包括类型的名称字段并将结果限制在id部分内。

– SharppC
2015年10月6日15:58
我同意。您的页面中可以有多种形式，限制为正确的形式是一个好主意。

– Kar.ma
16年5月19日在16:34

#6 楼

框架通常使用以下形式的括号名称：

<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]”]'

–relytmcd
18年6月13日在23:57


这是真的。当遇到基于属性的选择器元素而没有正确引用时，较新版本的jQuery（3.2.1版）更有可能失败。

–HoldOffHunger
18年6月27日在18:03

#9 楼

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

#10 楼

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

评论

仅匹配单个元素

– T.T.T.
09年7月10日在1:10
对于那个很抱歉。照本·森所说的去做。

–CalebHC
09年7月10日在1:14
是的，关于ID的说法是正确的。至于按名称选择，我认为这里有一篇提到Selectors / attributeEquals的帖子很有帮助。

– T.T.T.
09年7月10日在1:21
也许问题已经过编辑，但是他现在正在要求名称参考，但是可以，单个元素可以使用id选择器

– nckbrz
2014年11月2日在15:29
实际询问姓名

– Prathamesh更多
5月1日12:45

#11 楼

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

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


#12 楼

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

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

总而言之，如果无法按名称选择，要么使用复杂的jQuery选择器并接受任何相关的性能命中，要么使用类选择器。

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

这将限制jQuery搜索“世界”。

它仍然可以归类为复杂的选择器，但是它很快将任何搜索限制在表中'#tableID'的ID，因此将处理保持在最低水平。

如果要在＃table1中查找多个元素，则可以单独查找该元素，然后再查找将其传递给jQuery，因为这限制了范围，但每次都节省了一些查找它的处理过程。

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


评论

有点罗word的答案，但这从根本上是正确的整体方法。

–HoldOffHunger
18年6月27日在18:01
可能有点罗word，但比起一条解释不多的单行，最好在建议后面多一点解释和推理！ ;）当某人是某事物的新手并试图理解为什么a）它起作用以及b）它如何起作用时，它很有用

– Steve Childs
18年6月28日在15:38


#13 楼

性能
今天（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）在所有浏览器上最快。
令人惊讶的是，预先计算的解决方案（我）比大表的jQuery（E，F）解决方案要慢（!!!）-我检查了.hide（）jQuery方法在隐藏元素上设置了样式"default:none"-但看起来他们发现这样做的更快方法是n 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

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上的示例结果


#14 楼

您可以使用以下功能：

get.elementbyId();


评论

OP希望通过名称而不是ID来获取。什么是get.elementbyId（）？您是说document.getElementById（）吗？

–巴布桑
19年6月19日在7:39
不，他要求按名称选择元素。

–巴布桑
19年6月19日在7:47