我有一个表列,我正在尝试展开和隐藏。当我按类而不是按元素名称选择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>
表演
今天(2020.06.16),我在Chrome 83.0、Safari 13.1.1和Firefox 77.0上对MacOs High Sierra上选择的解决方案进行了测试。
结论
按名称获取元素
getElementByName(C)是适用于大小数组的所有浏览器的最快解决方案,但我可能是某种惰性加载解决方案,或者它使用带有名称元素对的内部浏览器哈希缓存混合js-jquery解决方案(B)比querySelectorAll(D)解决方案更快纯jquery解决方案(A)是最慢的
按名称获取行并隐藏它们(我们从比较中排除预先计算的本地解决方案(I)-理论上最快)-它用作参考)
令人惊讶的是,混合js-jquery解决方案(F)在所有浏览器上都是最快的令人惊讶的是,对于大表(!!!),预计算的解决方案(I)比jquery(E,F)解决方案慢-我检查了.ide()jquery方法在隐藏元素上设置了style“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函数A(){return$('[name=tcol1]');}函数B(){return$(document.getElementsByName(“tcoll1”))}函数C(){return document.getElementsByName(“tcoll1”)}函数D(){return document.querySelectorAll('[name=tcol1]')}函数E(){$('[name=tcol1'').ide();}函数F(){$(document.getElementsByName(“tcoll1”)).ide();}函数G(){document.getElementsByName(“tcol1”).forEach(e=>e.style.deisplay='none');}函数H(){document.querySelectorAll('[name=tcol1'').forEach(e=>e.style.display='none');}函数I(){让elArr=[…document.getElementsByName(“tcoll1”)];设长度=elArr.length对于(设i=0;i<length;i++)elArr[i].style.display='none';}// -----------//测试// -----------函数reset(){$('td[name=tcol1').show();}[A,B,C,D].forEach(f=>console.log(`${f.name}行:${f().length}`));<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script><div>此代码段仅显示使用过的代码</div><表><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr></table><button onclick=“E()”>E:隐藏</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()”>重置</button>
Chrome上的示例结果
您可以用老式的方式命名元素数组,并将该数组传递给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>
表演
今天(2020.06.16),我在Chrome 83.0、Safari 13.1.1和Firefox 77.0上对MacOs High Sierra上选择的解决方案进行了测试。
结论
按名称获取元素
getElementByName(C)是适用于大小数组的所有浏览器的最快解决方案,但我可能是某种惰性加载解决方案,或者它使用带有名称元素对的内部浏览器哈希缓存混合js-jquery解决方案(B)比querySelectorAll(D)解决方案更快纯jquery解决方案(A)是最慢的
按名称获取行并隐藏它们(我们从比较中排除预先计算的本地解决方案(I)-理论上最快)-它用作参考)
令人惊讶的是,混合js-jquery解决方案(F)在所有浏览器上都是最快的令人惊讶的是,对于大表(!!!),预计算的解决方案(I)比jquery(E,F)解决方案慢-我检查了.ide()jquery方法在隐藏元素上设置了style“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函数A(){return$('[name=tcol1]');}函数B(){return$(document.getElementsByName(“tcoll1”))}函数C(){return document.getElementsByName(“tcoll1”)}函数D(){return document.querySelectorAll('[name=tcol1]')}函数E(){$('[name=tcol1'').ide();}函数F(){$(document.getElementsByName(“tcoll1”)).ide();}函数G(){document.getElementsByName(“tcol1”).forEach(e=>e.style.deisplay='none');}函数H(){document.querySelectorAll('[name=tcol1'').forEach(e=>e.style.display='none');}函数I(){让elArr=[…document.getElementsByName(“tcoll1”)];设长度=elArr.length对于(设i=0;i<length;i++)elArr[i].style.display='none';}// -----------//测试// -----------函数reset(){$('td[name=tcol1').show();}[A,B,C,D].forEach(f=>console.log(`${f.name}行:${f().length}`));<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js“></script><div>此代码段仅显示使用过的代码</div><表><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr><tr><td>数据1</td>数据2</td></tr></table><button onclick=“E()”>E:隐藏</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()”>重置</button>
Chrome上的示例结果