题 如何使用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>

965
2017-07-10 01:05


起源


问题与内容不符。 ID和名称是不同的属性,并且选择不同 - Mark W
具有相同ID的元素符合W3C标准;即重复的ID是否定的。 - Steve Tauber


答案:


你可以使用 属性 选择:

$('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'

1807
2017-07-10 01:21



出于好奇,如何将其写为NOT tcol1,就像他们想隐藏除了名为tcol1的列之外的列一样? - HPWD
@Jon Erickson - 如果我不知道元素标签(在这种情况下是td),那该怎么办? - Varun
@Varun - 你可以省略td ...例如$('[name ^ = tcol]')将匹配所有具有属性'name'的元素,其值以'tcol'开头 - Jon Erickson
@Varun - 你可以在这里看到它: jsfiddle.net/zdPME - Jon Erickson
@HPWD你会使用:not selector, $("td:not([name='tcol1'])") 例如。你可以看到它 这个小提琴 - JohannesB


可以使用选择任何属性 [attribute_name=value] 办法。 看样品 这里

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

168
2017-09-22 19:07



但你应该使用上面的代码,这样你就不会错过qoutations!祝你好运,欢迎来到Stackoverflow社区:) - Afzaal Ahmad Zeeshan
这对我来说至少不起作用 - 但是以下声明有效 var value = $("[name=nameofobject]"); - Pranav
令人惊讶的是,在原来接受的答案发布4年后,这次获得了17次投票 - Huangism
21 upvotes now ...也许是因为答案比'td [name = tcol1]'更容易混淆,特别是因为td不是必需的,因此导致像我这样的人走错了路 - Chris Sprague
我的输入名称有一个[]像这样: <input name="itemid[]">。因此,由于正确使用引号,这个答案比接受的答案更有效。 - Sunish Menon


如果你有类似的东西:

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


52
2017-07-09 18:34





你可以按照老式的方式获取元素数组,并将该数组传递给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>


22
2017-07-11 05:25





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


18
2018-06-15 05:52



+1给出的唯一示例选择包含类型的名称字段并将结果限制在id部分内。 - SharpC
我同意。您可以在页面中包含多个表单,并且限制正确的表单是个好主意。 - Kar.ma


构架 通常使用 括号名称 在表格中,如:

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

13
2017-10-16 16:27





我这样做了,它有效:

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

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


12
2018-03-25 20:27



字面上给出了上面给出的答案: stackoverflow.com/a/18947703/439094 - René Sackers


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


5
2018-04-27 18:47





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

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

3
2018-03-31 12:51





就个人而言,我过去所做的就是给他们一个共同的类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); 
}

3
2018-02-23 12:16



有点罗嗦的答案,但这从根本上说是正确的整体方法。 - HoldOffHunger
可能有点罗嗦,但更好的是在建议背后有一点额外的解释和推理,而不是一条解释不多的单行! ;)当某人对某事物有所了解并试图理解为什么a)它有效并且b)它是如何工作的时候它很有用 - Steve Childs