性能

Question

有一个表格列我正在尝试展开和隐藏：

当我按class而不是按元素name选择时，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>

Answer 1

您可以使用attribute选择器：

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

Answer 2

可以使用[attribute_name=value]方式选择任何属性。请参阅示例here：

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

Answer 3

如果你有类似的话：

<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 );
});

摘录：

＆＃13;

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});

＆＃13;

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

＆＃13;

Answer 4

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

Answer 5

您可以使用jQuery中的name元素从输入字段获取名称值：

＆＃13;

for (int i = 0; i < bubble_Data.length; i++)
{
    if ( bubble_Data[i][0]>0)
        count++;
}
x_Array = new double[count];
int k = 0;
for (int i = 0; i < bubble_Data.length; i++)
{
    if ( bubble_Data[i][0]>0)
    {
        x_Array[k] = bubble_Data[i];
        k++; 
    } 
}

＆＃13;

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);

＆＃13;

Answer 6

框架通常在表单中使用括号，例如：

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

Answer 7

我已经完成了这样的工作并且有效：

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

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

Answer 8

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

Answer 9

就个人而言，我过去所做的就是给他们一个共同的类ID并用它来选择它们。它可能并不理想，因为它们具有可能不存在的指定类，但它使选择变得更加容易。只要确保你的班级名称是独一无二的。

即。对于上面的示例，我将按类使用您的选择。更好的方法是将类名从粗体更改为'tcol1'，这样您就不会在jQuery结果中出现任何意外的内容。如果粗体确实引用了CSS类，则可以始终在类属性中指定它们 - 即'class =“tcol1 bold”'。

总之，如果您不能按名称选择，请使用复杂的jQuery选择器并接受任何相关的性能命中或使用类选择器。

您始终可以通过包含表名来限制jQuery范围，即 $（'＃tableID＆gt; .bold'）

这应该限制jQuery搜索“世界”。

它仍然可以被归类为一个复杂的选择器，但它很快就会限制在表中使用'#tableID'的ID进行搜索，因此将处理保持在最低限度。

如果你在＃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); 
}

Answer 10

您可以将任何属性用作[attribute_name=value]的选择器。

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

Answer 11

＆＃13;

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}

＆＃13;

<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="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

＆＃13;

Answer 12

您忘记了第二组引号，这使得接受的答案不正确：

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

Answer 13

你可以使用它的ID属性来获取JQuery中的元素：

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

Answer 14

性能

今天（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）解决方案（!!!）慢-我检查了隐藏元素上的.hide（）jQuery方法设置样式"default:none"-但看来他们找到比element.style.display='none'
jquery（E）解决方案在大表上非常快
jquery（E）和querySelectorAll（H）解决方案最慢
getElementByName（G）和querySelectorAll（H）解决方案非常慢

详细信息

我对按名称（A，B，C，D）读取的元素执行两次测试，然后隐藏该元素（E，F，G，H，我）

小表-3行-您可以运行测试HERE
大表-1000行-您可以运行测试HERE

下面的代码段显示了使用的代码

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

function A() {
  return $('[name=tcol1]');
}

function B() {
  return $(document.getElementsByName("tcol1"))
}

function C() {
  return document.getElementsByName("tcol1")
}

function D() {
  return document.querySelectorAll('[name=tcol1]')
}

function E() {
  $('[name=tcol1]').hide();
}

function F() {
  $(document.getElementsByName("tcol1")).hide();
}

function G() {
  document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); 
}

function H() {
  document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); 
}

function I() {
  let elArr = [...document.getElementsByName("tcol1")];
  let length = elArr.length
  for(let i=0; i<length; i++) elArr[i].style.display='none';
}




// -----------
// TEST
// -----------

function reset() { $('td[name=tcol1]').show(); } 

[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
  <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>
</table>

<button onclick="E()">E: hide</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()">reset</button>

Chrome上的示例结果

Answer 15

您可以使用以下功能：

[{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "food",
  "Brand": "bosch",
  "legendKey": "5_1"
},
{
  "NS": "performance",
  "Brand": "ge",
  "legendKey": "4_2"
}]


<ul class="legend">Needstates
    {
    this.state.legend ? legend.map((ele, i) =>{
    return(
    <li>
    <span key={i} style={{backgroundColor:this.state.colors[ele['legendKey'][2]-1]}}></span> {ele['NS']}
    </li>
    )
    }
    ):
    null
    }
</ul>

Answer 16

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var a= $("td[name=tcol3]").html();
    alert(a);

});

</script>


<table border="3">
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2tcol1</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol2" class="bold"> data2tcol2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol3" class="bold"> data2tcol3</td>
</tr>
</table>

这是可能有用的代码。

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

16 个答案:

性能

结论

详细信息