Wie kann ich ein Element nach Namen mit jQuery auswählen?

Question

Ich habe eine Tabellenspalte, die ich versuche zu erweitern und zu verbergen. jQuery scheint die <td> Elemente, wenn ich sie mit class aber nicht durch das Element name .

Zum Beispiel:

$(".bold").hide(); // Selecting by class works.
$("tcol1").hide(); // Selecting by name does not work.

Beachten Sie das unten stehende HTML. Die zweite Spalte hat die gleiche name für alle Zeilen. Wie kann ich diese Sammlung mit Hilfe des name Attribut?

<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

Leistung

Heute (2020.06.16) führe ich Tests für ausgewählte Lösungen auf MacOs High Sierra mit Chrome 83.0, Safari 13.1.1 und Firefox 77.0 durch.

Schlussfolgerungen

Elemente nach Namen abrufen

• getElementByName (C) ist die schnellste Lösung für alle Browser für große und kleine Arrays - jedoch ist ich wahrscheinlich eine Art von Lazy-Loading-Lösung oder es verwenden einige interne Browser-Hash-Cache mit Name-Element-Paare
• gemischte js-jquery-Lösung (B) ist schneller als querySelectorAll (D) Lösung
• reine Jquery-Lösung (A) ist am langsamsten

Zeilen nach Namen suchen und ausblenden (wir schließen die vorberechnete native Lösung (I) - theoretisch die schnellste - vom Vergleich aus - sie wird als Referenz verwendet)

• überraschenderweise ist die gemischte js-jquery-Lösung (F) auf allen Browsern am schnellsten
• überraschenderweise ist die vorberechnete Lösung (I) langsamer als die JQuery-Lösungen (E, F) für große Tabellen (!!!) - ich überprüfe, dass die JQuery-Methode .hide() den Stil "default:none" auf versteckte Elemente - aber es sieht so aus, als ob sie einen schnelleren Weg finden, als es element.style.display='none'
• jquery (E)-Lösung ist bei großen Tabellen recht schnell
• Die Lösungen jquery (E) und querySelectorAll (H) sind bei kleinen Tabellen am langsamsten
• Die Lösungen getElementByName (G) und querySelectorAll (H) sind bei großen Tabellen recht langsam

Einzelheiten

Ich führe zwei Tests für Leseelemente nach Namen durch ( A , B , C , D ) und verbergen die Elemente (E,F,G,H,I)

• kleine Tabelle - 3 Zeilen - Sie können einen Test durchführen HIER
• große Tabelle - 1000 Zeilen - Sie können einen Test durchführen HIER

Der folgende Ausschnitt zeigt die verwendeten 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<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>

Beispielergebnisse in Chrome

Answer 2

Ich persönlich habe ihnen in der Vergangenheit eine gemeinsame Klassenkennung gegeben und diese zur Auswahl verwendet. Das ist zwar nicht ideal, da eine Klasse angegeben wird, die es vielleicht gar nicht gibt, aber es macht die Auswahl um einiges einfacher. Achten Sie nur darauf, dass Ihre Klassennamen eindeutig sind.

D.h. für das obige Beispiel würde ich Ihre Auswahl nach Klasse verwenden. Noch besser wäre es, den Klassennamen von "bold" in "tcol1" zu ändern, damit Sie keine versehentlichen Einschlüsse in den jQuery-Ergebnissen erhalten. Wenn sich bold tatsächlich auf eine CSS-Klasse bezieht, können Sie immer beide in der class-Eigenschaft angeben - z. B. 'class="tcol1 bold"'.

Zusammenfassend lässt sich sagen, dass Sie, wenn Sie nicht nach Namen auswählen können, entweder einen komplizierten jQuery-Selektor verwenden und die damit verbundenen Leistungseinbußen in Kauf nehmen oder Klassenselektoren verwenden sollten.

Sie können den jQuery-Bereich immer einschränken, indem Sie den Tabellennamen einschließen, z. B. $('#tableID > .bold')

Das sollte jQuery davon abhalten, die "Welt" zu durchsuchen.

Es könnte immer noch als komplizierter Selektor eingestuft werden, aber es schränkt die Suche schnell auf die Tabelle mit der ID "#tableID" ein, so dass die Verarbeitung auf ein Minimum beschränkt wird.

Eine Alternative dazu, wenn Sie nach mehr als einem Element innerhalb von #table1 suchen, wäre es, dieses separat zu suchen und es dann an jQuery zu übergeben, da dies den Umfang einschränkt, aber ein bisschen Verarbeitung spart, um es jedes Mal zu suchen.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}

Answer 3

Sie können das Element in JQuery erhalten, indem Sie sein ID-Attribut wie folgt verwenden:

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

Answer 4

Sie können die Funktion verwenden:

get.elementbyId();