问：

我有一个表格列，我正在尝试展开和隐藏。jQuery似乎在我选择元素时隐藏了元素，但不是元素的.<td>classname

例如：

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

请注意下面的 HTML。第二列对所有行都相同。如何使用该属性创建此集合？namename

<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

11赞 Mark W 8/22/2011

问题与内容不符。ID 和 name 是不同的属性，选择方式也不同

16赞 Steve Tauber 2/17/2013

使用具有相同 ID 的元素是违反 W3C 标准的;即重复的 ID 是不行的。

0赞 Sebastian Simon 3/18/2021

CSS 规范包括一个新的列组合器，因此很快您只需选择是否有 .document.querySelectorAll("td || col.secondColumn")<colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>

答：

-5赞 CalebHC 7/10/2009 #1

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

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

8赞 dylanh724 8/15/2021

OP 按姓名询问，而不是 ID

0赞 Marcus 2/15/2022

为什么这个答案会出现在顶部？

1赞 CalebHC 2/16/2022

@Marcus，因为这是所有答案中最关键的答案。

0赞 CalebHC 2/16/2022

@dylanh724这个问题最初是关于按名称查找的。

0赞 Arruda 10/26/2023

您没有回答问题，请不要添加不必要的答案，这些答案不是用户要求的。

2722赞 Jon Erickson 7/10/2009 #2

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

43赞 Jon Erickson 7/9/2012

@Varun - 您可以省略 TD...例如，$（'[name^=tcol]'）将所有具有属性“name”的元素与以“tcol”开头的值进行匹配

0赞 Mohamed Raza 6/2/2023

[name="fk_item_id[${clone_id}]"]魔术师

34赞 Your Friend Ken 7/11/2009 #3

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

335赞 user2804791 9/23/2013 #4

任何属性都可以使用方式选择。请参阅此处的示例：[attribute_name=value]

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

85赞 Andreas L. 7/10/2014 #5

如果您有类似情况：

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

2赞 Steve Childs 2/23/2015 #6

就我个人而言，我过去所做的是给它们一个通用的类 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); 
}

16赞 kscius 3/26/2015 #7

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

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

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

32赞 Shrikant D 6/15/2015 #8

您可以通过以下方式使用 jQuery 中的 name 元素从输入字段中获取 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>

22赞 itsnikolay 10/17/2015 #9

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

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

5赞 user6139189 3/31/2016 #10

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

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

5赞 Guest 4/28/2016 #11

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

11赞 Chris J 11/21/2017 #12

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

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

0赞 relytmcd 6/14/2018

例如，如果字段名称是'td[name="nested[fieldName]"]'

0赞 HoldOffHunger 6/28/2018

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

-24赞 Pratyush Goyal 6/19/2019 #13

您可以使用以下功能：

get.elementbyId();

5赞 barbsan 6/19/2019

OP 想通过名称而不是 ID 获取。什么是？你是说吗？get.elementbyId()document.getElementById()

10赞 barbsan 6/19/2019

不，他要求按名称选择一个元素。

4赞 Kamil Kiełczewski 6/17/2020 #14

性能

今天（2020.06.16）我在Chrome 83.0、Safari 13.1.1和Firefox 77.0上的MacOs High Sierra上对选定的解决方案进行了测试。

结论

按名称获取元素

getElementByName（C）是所有大型和小型数组浏览器的最快解决方案 - 但是我可能是某种延迟加载解决方案，或者它使用一些带有名称元素对的内部浏览器哈希缓存
混合 js-jquery 解决方案（B）比（D）解决方案更快querySelectorAll
纯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 行 - 您可以在这里运行测试
大表 - 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 上的示例结果

4赞 ericksho 3/16/2021

很棒的信息，但很多东西没有回答这个问题，它只是相关的知识

2赞 Aldo 3/30/2023 #15

还有 2 个例子：

<input type="text" name="foo">
<input type="text" name="foo[bar]">

跟：

$('[name="foo"]');
$('[name="foo\\[bar\\]"]');

片段：

$('#copy').on('click', () => {
  let $from = $('[name="foo"]');
  let $to = $('#result-1');
  $to.val($from.val());

  $from = $('[name="foo\\[bar\\]"]');
  $to = $('#result-2');
  $to.val($from.val());
});

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<p>
  <input type="text" name="foo" value="copy name='foo'">
  <input type="text" disabled id="result-1" placeholder="i'm disabled">
</p>
<p>
  <input type="text" name="foo[bar]" value="copy name='foo[bar]'">
  <input type="text" disabled id="result-2" placeholder="i'm disabled">
</p>

<input type="button" id="copy" value="copy values">

上一个：如何找出哪个 DOM 元素具有焦点？

下一个：jQuery document.createElement 等价物？

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

How can I select an element by name with jQuery?

评论

评论

评论

评论

评论

性能

结论

详

评论