Jak mogę wybrać element według nazwy za pomocą jQuery?

1224

Mają kolumnę tabeli, którą próbuję rozwinąć i ukryć:

jQuery wydaje się ukrywać tdelementy, gdy wybieram je według klasy, ale nie według nazwy elementu .

Na przykład dlaczego: 

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

Uwaga HTML poniżej, druga kolumna ma taką samą nazwę dla wszystkich wierszy. Jak mogę utworzyć tę kolekcję za pomocą nameatrybutu?

<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
źródło
7
Pytanie nie pasuje do treści. Identyfikator i nazwa są różnymi atrybutami i są wybierane inaczej
Mark W
12
Posiadanie elementów o tym samym identyfikatorze jest niezgodne ze standardami W3C; tzn. zduplikowane identyfikatory to nie nie.
Steve Tauber

Odpowiedzi:

2174

Możesz użyć selektora atrybutów jQuery :

$('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
źródło
1
Po prostu z ciekawości, jak napisać to jako NIE tcol1, na przykład co, gdyby chcieli ukryć kolumny inne niż kolumny o nazwie tcol1?
HPWD,
25
@ Varun - możesz po prostu pominąć td ... na przykład $ („[nazwa ^ = tcol]”) dopasuje wszystkie elementy, które mają atrybut „nazwa” o wartości zaczynającej się od „tcol”
Jon Erickson
Musiałem użyć go jak $ ('td [name = tcol1]') - bez odstępu między td a [] zwrócił mi wartość NULL.
akki
@DougMolineux Właściwie pasuje do wcześniejszej poprawki nazwy.
mareoraft
7
@HPWD użyjesz $("td:not([name='tcol1'])")na przykład selektora: not . Widać to na skrzypcach
JohannesB
224

Dowolny atrybut można wybrać przy użyciu [attribute_name=value]sposobu. Zobacz próbkę tutaj :

var value = $("[name='nameofobject']");
użytkownik2804791
źródło
ale powinieneś użyć powyższego kodu, aby nie przegapić qoutacji! Powodzenia i witaj w społeczności
Stackoverflow
7
To nie działa przynajmniej dla mnie - Ale następujące oświadczenie działavar value = $("[name=nameofobject]");
Pranav
2
Zaskakujące jest to, że otrzymało 17 głosów pozytywnych, gdy stało się to 4 lata po pierwotnie przyjętej odpowiedzi
Huangism
6
21 głosów pozytywnych teraz ... może dlatego, że odpowiedź jest mniej myląca niż „td [nazwa = tcol1]”, zwłaszcza, że ​​td nie jest wymagane, a zatem prowadzi ludzi takich jak ja na niewłaściwą ścieżkę
Chris Sprague,
2
Moi nazwy wejściowe miał [] tak: <input name="itemid[]">. Tak więc ta odpowiedź działała lepiej niż odpowiedź zaakceptowana, dzięki odpowiedniemu wykorzystaniu cytatów.
Sunish Menon
62

Jeśli masz coś takiego:

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

Możesz przeczytać wszystko w ten sposób:

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

Fragment:

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">
Rozwiń fragment kodu

Andreas L.
źródło
26

Możesz uzyskać tablicę elementów po nazwie w staroświecki sposób i przekazać tę tablicę do 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>
Rozwiń fragment kodu

Uwaga: jedynym powodem, dla którego warto użyć atrybutu „nazwa”, powinno być pole wyboru lub wejście radiowe.

Lub możesz po prostu dodać kolejną klasę do elementów do selekcji. (Tak bym zrobił)

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>
Rozwiń fragment kodu

Twój przyjaciel Ken
źródło
24

Możesz uzyskać wartość nazwy z pola wejściowego za pomocą elementu name w jQuery poprzez:

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>
Rozwiń fragment kodu

Shrikant D.
źródło
+1 Jedyny podany przykład, który wybiera pole nazwy wraz z typem i ogranicza wyniki do sekcji identyfikatora.
SharpC,
Zgadzam się. Możesz mieć wiele formularzy na swojej stronie, a ograniczenie do właściwego jest dobrym pomysłem.
Kar.ma
15

Szkielety zwykle używają nazw nawiasów w formularzach, takich jak:

<input name=user[first_name] />

Można uzyskać do nich dostęp poprzez:

// 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
źródło
5

Oto proste rozwiązanie: $('td[name=tcol1]')

Gość
źródło
5

Zapomniałeś drugiego zestawu cytatów, co powoduje, że zaakceptowana odpowiedź jest niepoprawna:

$('td[name="tcol1"]')
Chris J
źródło
na przykład, jeśli nazwa pola to'td[name="nested[fieldName]"]'
relytmcd
To jest najprawdziwsza prawda. Nowsze wersje jQuery (v. 3.2.1) są bardziej narażone na niepowodzenie, gdy napotkają element selektora oparty na atrybutach bez odpowiedniego cytowania.
HoldOffHunger
3

Możesz uzyskać element w JQuery, używając jego atrybutu ID w następujący sposób:

$("#tcol1").hide();
CalebHC
źródło
4
Pasuje tylko do jednego elementu
TTT
2
Przepraszam za to. Po prostu zrób to, co powiedział Ben S.
CalebHC
Tak, to prawda o ID. Jeśli chodzi o wybieranie według nazwy, myślę, że był tu post odnoszący się do Selektorów / atrybutów, który był pomocny.
TTT,
1
Być może pytanie zostało zredagowane, ale teraz prosi o odwołanie do nazwy, ale tak, pojedyncze elementy mogą korzystać z selektora id
nckbrz
Pytanie w rzeczywistości dla imienia
Prathamesh Więcej
3

Jako selektora możesz użyć dowolnego atrybutu [attribute_name=value].

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

źródło
3

Osobiście to, co zrobiłem w przeszłości, daje im wspólny identyfikator klasy i użyłem go do ich wyboru. Może nie być idealny, ponieważ mają określoną klasę, która może nie istnieć, ale znacznie ułatwia wybór. Upewnij się tylko, że jesteś wyjątkowy w swoich nazwach klas.

tzn. w powyższym przykładzie użyłbym twojego wyboru według klasy. Jeszcze lepiej byłoby zmienić nazwę klasy z pogrubionej na „tcol1”, aby nie uzyskać żadnych przypadkowych inkluzji w wynikach jQuery. Jeśli pogrubienie faktycznie odnosi się do klasy CSS, zawsze możesz podać oba we właściwości class - tj. „Class =" tcol1 pogrubiony ”.

Podsumowując, jeśli nie możesz wybrać według nazwy, użyj skomplikowanego selektora jQuery i zaakceptuj wszelkie powiązane wyniki wydajności lub użyj selektorów klasy.

Zawsze możesz ograniczyć zakres jQuery, włączając nazwę tabeli, tj. $ ('# TableID> .bold')

To powinno ograniczyć jQuery do przeszukiwania „świata”.

Nadal można go zaklasyfikować jako skomplikowany selektor, ale szybko ogranicza wyszukiwanie w tabeli o identyfikatorze „#tableID”, więc ogranicza przetwarzanie do minimum.

Alternatywą tego, jeśli szukasz więcej niż 1 elementu w # table1, byłoby sprawdzenie tego osobno, a następnie przekazanie go do jQuery, ponieważ ogranicza to zakres, ale oszczędza trochę przetwarzania, aby wyszukać za każdym razem.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
Steve Childs
źródło
Nieco trudna odpowiedź, ale jest to zasadniczo poprawne ogólne podejście.
HoldOffHunger
2
Może być trochę nieporadne, ale lepiej mieć dodatkowe wyjaśnienie i uzasadnienie sugestii niż jeden wiersz, który mało wyjaśnia! ;) Przydaje się, gdy ktoś jest nowy w czymś i próbuje zrozumieć, dlaczego a) to działa i b) jak to działa
Steve Childs
-13

Możesz użyć funkcji:

get.elementbyId();
Pratyush Goyal
źródło
2
OP chciał uzyskać po nazwie , a nie identyfikatorze. A co to jest get.elementbyId()? Miałeś na myśli document.getElementById()?
barbsan
8
Nie, prosi o wybranie elementu według nazwy.
barbsan