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

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

当我按而不是按元素的名称选择 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>

答案

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

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

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

如果您有类似的东西:

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

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

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

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

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

我已经完成了这样的工作:

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

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

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

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

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

就个人而言,我过去所做的就是为他们提供一个通用的类 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); 
}