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

1227

Haben Sie eine Tabellenspalte, die ich erweitern und ausblenden möchte:

jQuery scheint die zu verbergen tdElemente , wenn ich es durch wählen Klasse , aber nicht durch das Element des Namens .

Warum zum Beispiel: 

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

Beachten Sie den folgenden HTML-Code. Die zweite Spalte hat für alle Zeilen den gleichen Namen. Wie kann ich diese Sammlung mit dem nameAttribut erstellen ?

<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>
javascript jquery html dom jquery-selectors TTT
quelle
7
Die Frage stimmt nicht mit dem Inhalt überein. ID und Name sind unterschiedliche Attribute und werden unterschiedlich ausgewählt
Mark W
12
Es verstößt gegen W3C-Standards, Elemente mit derselben ID zu haben. dh doppelte IDs sind ein Nein Nein.
Steve Tauber

Antworten:

2178

Sie können den Attributselektor jQuery verwenden :

$('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'
Jon Erickson
quelle
1
Wie würde man dies aus Neugier als NICHT tcol1 schreiben, wie wenn man die anderen Spalten als die Spalten mit dem Namen tcol1 ausblenden wollte?
HPWD
25
@Varun - Sie können das td einfach weglassen ... zum Beispiel $ ('[name ^ = tcol]') stimmt mit allen Elementen überein, die ein Attribut 'name' haben, mit einem Wert, der mit 'tcol' beginnt
Jon Erickson
Ich musste es wie $ ('td [name = tcol1]') verwenden - ohne das Leerzeichen zwischen td und [] gab es mir NULL zurück.
Akki
@DougMolineux Eigentlich stimmt er mit dem Pre- Fix eines Namens überein .
Mareoraft
7
@HPWD Sie würden $("td:not([name='tcol1'])")zum Beispiel den Selektor: not verwenden . Sie können es an dieser Geige sehen
JohannesB
224

Jedes Attribut kann mit [attribute_name=value]way ausgewählt werden . Sehen Sie das Beispiel hier :

var value = $("[name='nameofobject']");
user2804791
quelle
Sie sollten jedoch den obigen Code verwenden, damit Sie die Fragen nicht verpassen! Viel Glück und willkommen in der Stackoverflow Community :)
Afzaal Ahmad Zeeshan
7
Dies funktioniert zumindest für mich nicht - aber die folgende Aussage funktioniertvar value = $("[name=nameofobject]");
Pranav
2
Es ist überraschend, dass dies 17 positive Stimmen erhalten hat, als dies 4 Jahre nach der ursprünglich akzeptierten Antwort kam
Huangism
6
21 Upvotes jetzt ... vielleicht liegt es daran, dass die Antwort weniger verwirrend ist als 'td [name = tcol1]', zumal das td nicht erforderlich ist und daher Leute wie mich auf den falschen Weg führt
Chris Sprague
2
Meine Eingabenamen hatten ein [] wie folgt : <input name="itemid[]">. Dank der richtigen Verwendung von Anführungszeichen funktionierte diese Antwort also perfekter als die akzeptierte Antwort.
Sunish Menon
62

Wenn Sie etwas haben wie:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Sie können alles so lesen:

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

Das Snippet:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});
<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">
Erweitern Sie das Snippet

Andreas L.
quelle
26

Sie können das Array von Elementen auf die altmodische Weise nach Namen abrufen und dieses Array an jQuery übergeben.

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>
Erweitern Sie das Snippet

Hinweis: Das einzige Mal, wenn Sie einen Grund hätten, das Attribut "Name" zu verwenden, sollten Kontrollkästchen oder Funkeingänge sein.

Oder Sie können den Elementen zur Auswahl einfach eine weitere Klasse hinzufügen. (Dies würde ich tun.)

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>
Erweitern Sie das Snippet

Dein Freund Ken
quelle
24

Sie können den Namenswert aus einem Eingabefeld mithilfe des Namenselements in jQuery abrufen, indem Sie:

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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>
Erweitern Sie das Snippet

Shrikant D.
quelle
+1 Das einzige gegebene Beispiel, das ein Namensfeld einschließlich Typ auswählt und die Ergebnisse auf einen ID-Abschnitt beschränkt.
SharpC
Genau. Sie können mehrere Formulare auf Ihrer Seite haben, und es ist eine gute Idee, sich auf das richtige zu beschränken.
Kar.ma
15

Frameworks verwenden normalerweise Klammernamen in Formularen wie:

<input name=user[first_name] />

Sie können aufgerufen werden durch:

// 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]\"]")
itsnikolay
quelle
5

Hier ist eine einfache Lösung: $('td[name=tcol1]')

Gast
quelle
5

Sie haben den zweiten Satz von Anführungszeichen vergessen, wodurch die akzeptierte Antwort falsch ist:

$('td[name="tcol1"]')
Chris J.
quelle
Zum Beispiel, wenn der Feldname'td[name="nested[fieldName]"]'
relertmcd
Das ist sehr wahr. Neuere Versionen von jQuery (Version 3.2.1) schlagen viel häufiger fehl, wenn ein Attribut-basiertes Auswahlelement ohne ordnungsgemäße Anführungszeichen auftritt.
HoldOffHunger
3

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

$("#tcol1").hide();
CalebHC
quelle
4
Entspricht nur einem einzelnen Element
TTT
2
Das tut mir leid. Tu einfach, was Ben S gesagt hat.
CalebHC
Ja, das gilt für die ID. Was die Auswahl nach Namen angeht, gab es hier oben einen Beitrag, der sich auf Selectors / attributeEquals bezog und hilfreich war.
TTT
1
Vielleicht wurde die Frage bearbeitet, aber er bittet jetzt um Namensreferenz, aber ja, einzelne Elemente können den ID-Selektor verwenden
nckbrz
Frage eigentlich nach Namen
Prathamesh More
3

Sie können jedes Attribut als Selektor mit verwenden [attribute_name=value].

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

quelle
3

Persönlich habe ich ihnen in der Vergangenheit eine gemeinsame Klassen-ID gegeben und diese zur Auswahl verwendet. Es ist vielleicht nicht ideal, da eine Klasse angegeben ist, die möglicherweise nicht existiert, aber es macht die Auswahl um einiges einfacher. Stellen Sie einfach sicher, dass Sie in Ihren Klassennamen eindeutig sind.

Für das obige Beispiel würde ich Ihre Auswahl nach Klassen verwenden. Besser noch wäre es, den Klassennamen von fett in 'tcol1' zu ändern, damit Sie keine versehentlichen Einschlüsse in die jQuery-Ergebnisse erhalten. Wenn Fettdruck tatsächlich auf eine CSS-Klasse verweist, können Sie beide in der Klasseneigenschaft angeben - dh 'class = "tcol1 fett"'.

Wenn Sie nicht nach Name auswählen können, verwenden Sie entweder einen komplizierten jQuery-Selektor und akzeptieren Sie alle damit verbundenen Leistungseinbußen oder verwenden Sie Klassenselektoren.

Sie können den jQuery-Bereich jederzeit einschränken, indem Sie den Tabellennamen $ ('# tableID> .bold') angeben.

Das sollte jQuery daran hindern, die "Welt" zu durchsuchen.

Es könnte immer noch als komplizierter Selektor eingestuft werden, beschränkt jedoch schnell jede Suche innerhalb der Tabelle mit der ID '#tableID', sodass die Verarbeitung auf ein Minimum beschränkt bleibt.

Eine Alternative dazu, wenn Sie nach mehr als einem Element in # table1 suchen, besteht darin, dieses separat nachzuschlagen und es dann an jQuery zu übergeben, da dies den Umfang einschränkt, aber ein wenig Verarbeitung spart, um es jedes Mal nachzuschlagen.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
Steve Childs
quelle
Etwas wortreiche Antwort, aber dies ist grundsätzlich der richtige Gesamtansatz.
HoldOffHunger
2
Mag ein bisschen wortreich sein, aber es ist besser, ein bisschen mehr Erklärung und Argumentation hinter einem Vorschlag zu haben als eine einzelne Zeile, die wenig erklärt! ;) Es ist nützlich, wenn jemand neu in etwas ist und versucht zu verstehen, warum a) es funktioniert und b) wie es funktioniert
Steve Childs
-13

Sie können die Funktion verwenden:

get.elementbyId();
Pratyush Goyal
quelle
2
OP wollte nach Namen und nicht nach ID suchen. Und was ist get.elementbyId()? Meinten Sie document.getElementById()?
Barbansan
8
Nein, er bittet darum, ein Element nach Namen auszuwählen.
Barbansan