我有一个表格列,我正在尝试展开和隐藏。当我通过 class
而不是通过元素的 name
选择它时,jQuery 似乎隐藏了 <td>
元素。
例如:
$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.
请注意下面的 HTML。对于所有行,第二列具有相同的 name
。如何使用 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>
<colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>
,您很快就可以简单地选择 document.querySelectorAll("td || col.secondColumn")
。
您可以使用 jQuery attribute selector:
$('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'
如果你有类似的东西:
<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 ); });
您可以通过名称以老式方式获取元素数组并将该数组传递给 jQuery。
函数 toggleByName() { var arrChkBox = document.getElementsByName("chName"); $(arrChkBox).toggle(); }
注意:您唯一有理由使用“名称”属性的情况应该是复选框或单选输入。
或者您可以将另一个类添加到元素中以供选择。(这就是我要做的)
函数 toggleByClass(bolShow) { if (bolShow) { $(".rowToToggle").show(); } 其他 { $(".rowToToggle").hide(); } }
data1 | data2 |
data1 td> | data2 |
data1 | data2 |
data1 | data2 |
data1 | data2 |
data1 | data2 |
Chrome 上的示例结果
https://i.stack.imgur.com/iyjpp.png
就个人而言,我过去所做的就是给他们一个通用的类 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);
}
您可以通过使用它的 ID 属性来获取 JQuery 中的元素,如下所示:
$("#tcol1").hide();
您可以使用以下功能:
get.elementbyId();
get.elementbyId()
是什么?您是说 document.getElementById()
吗?