How can I select an element by name with jQuery?

Question

Have a table column I\'m trying to expand and hide:

jQuery seems to hide the td elements when I select it by class but not by element\'s name.

<

Answer 1

Performance

Today (2020.06.16) I perform tests for chosen solutions on MacOs High Sierra on Chrome 83.0, Safari 13.1.1 and Firefox 77.0.

Conclusions

Get elements by name

• getElementByName (C) is fastest solution for all browsers for big and small arrays - however I is probably some kind of lazy-loading solution or It use some internal browser hash-cache with name-element pairs
• mixed js-jquery solution (B) is faster than querySelectorAll (D) solution
• pure jquery solution (A) is slowest

Get rows by name and hide them (we exclude precalculated native solution (I) - theoretically fastest) from comparison - it is used as reference)

• surprisingly the mixed js-jquery solution (F) is fastest on all browsers
• surprisingly the precalculated solution (I) is slower than jquery (E,F) solutions for big tables (!!!) - I check that .hide() jQuery method set style "default:none" on hidden elements - but it looks that they find faster way of do it than element.style.display='none'
• jquery (E) solution is quite-fast on big tables
• jquery (E) and querySelectorAll (H) solutions are slowest for small tables
• getElementByName (G) and querySelectorAll (H) solutions are quite slow for big tables

Details

I perform two tests for read elements by name (A,B,C,D) and hide that elements (E,F,G,H,I)

• small table - 3 rows - you can run test HERE
• big table - 1000 rows - you can run test HERE

Snippet below presents used codes

//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 console.log(`${f.name} rows: ${f().length}`)) ;

This snippet only presents used codes

  
    
      
data1
      
 data2
  
  
    
      
data1
      
 data2
  
  
  
    
      
data1
      
 data2
  


E: hide
F: hide
G: hide
H: hide
I: hide

reset

Example results on Chrome