我有一个表列,我正在尝试展开和隐藏。当我按类而不是按元素名称选择jQuery时,jQuery似乎隐藏了<td>元素。

例如:

$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by 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,并用它来选择他们。这可能并不理想,因为他们指定了一个可能不存在的类,但这让选择变得非常简单。只要确保你的类名是唯一的。

也就是说,对于上面的例子,我将按类别使用您的选择。最好还是将类名从粗体更改为“tcol1”,这样就不会在jQuery结果中意外包含任何内容。如果粗体确实引用了一个CSS类,您可以在class属性中同时指定这两个类,即“class=“tcol1 bold””。

总之,如果不能按名称进行选择,可以使用复杂的jQuery选择器并接受任何相关的性能命中,也可以使用Class选择器。

您可以始终通过包含表名来限制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); 
}

其他回答

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

您可以使用JQuery中的ID属性获取该元素,如下所示:

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

就我个人而言,我过去所做的就是给他们一个通用的类id,并用它来选择他们。这可能并不理想,因为他们指定了一个可能不存在的类,但这让选择变得非常简单。只要确保你的类名是唯一的。

也就是说,对于上面的例子,我将按类别使用您的选择。最好还是将类名从粗体更改为“tcol1”,这样就不会在jQuery结果中意外包含任何内容。如果粗体确实引用了一个CSS类,您可以在class属性中同时指定这两个类,即“class=“tcol1 bold””。

总之,如果不能按名称进行选择,可以使用复杂的jQuery选择器并接受任何相关的性能命中,也可以使用Class选择器。

您可以始终通过包含表名来限制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); 
}

您可以用老式的方式命名元素数组,并将该数组传递给jQuery。

函数toggleByName(){var arrChkBox=文档.getElementsByName(“chName”);$(arrChkBox).tggle();}<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”属性的时间应该是复选框或单选输入。

或者您可以向元素添加另一个类以供选择。(这是我会做的)

函数切换ByClass(bolShow){if(bolShow){$(“.rowToToToggle”).show();}其他{$(“.rowToToToggle”).hide();}}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><html><head><title>sandBox</title></head><body><表><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr><tr><td>数据1</td><td class=“bold rowToToToggle”>data2</td></tr></table><input type=“button”onclick=“toggleByClass(true);”value=“show”/><input type=“button”onclick=“toggleByClass(false);”value=“hide”/></body></html>

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