it-swarm.com.de

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

Haben Sie eine Tabellenspalte, die ich zu erweitern und zu verbergen versuche:

jQuery scheint die td -Elemente zu verbergen, wenn ich sie nach Klasse auswähle, aber nicht nach Name des Elements.

Zum Beispiel, warum tut:

$(".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 Attribut name 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>
1119
T.T.T.

Sie können den Attribut Selektor 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'
2015
Jon Erickson

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

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

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

Der Ausschnitt:

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">
57
Andreas L.

Sie könnten das Array mit den Elementen auf die altmodische Weise benennen 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>

hinweis: Das Attribut "Name" sollte nur für Ankreuzfelder oder Funkeingänge verwendet werden.

Oder Sie können den Elementen einfach eine weitere Klasse zur Auswahl hinzufügen. (Das 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>
25
Your Friend Ken

Sie können den Wert für name aus einem Eingabefeld mit dem Element name in jQuery abrufen, indem Sie folgende Schritte ausführen:

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>
22
Shrikant D

Frameworks verwenden normalerweise Klammernamen in Formularen wie:

<input name=user[first_name] />

Sie sind zugänglich über:

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

Ich habe es so gemacht und es funktioniert:

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

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

13
kscius

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

5
Guest

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

$('td[name="tcol1"]') 
4
Chris J

Ich persönlich habe ihnen in der Vergangenheit eine gemeinsame Klassen-ID gegeben und diese verwendet, um sie auszuwählen. Es mag nicht ideal sein, da sie eine Klasse angegeben haben, die es möglicherweise nicht gibt, 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 Klasse verwenden. Besser wäre es, den Klassennamen von fett in 'tcol1' zu ändern, damit Sie keine versehentlichen Einschlüsse in die jQuery-Ergebnisse erhalten. Wenn fett tatsächlich auf eine CSS-Klasse verweist, können Sie immer beides in der class-Eigenschaft angeben - d. H. 'Class = "tcol1 bold"'.

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

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

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

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

Eine Alternative dazu, wenn Sie in # table1 nach mehr als einem Element suchen, besteht darin, dieses Element separat zu suchen und dann an jQuery zu übergeben, da dies den Gültigkeitsbereich einschränkt, aber bei jedem Nachschlagen ein wenig Verarbeitungsaufwand spart.

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

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

$('td[name=tcol1]').hide();
3
user6139189
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="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>
3
sumith deepan

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

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