Bagaimana saya bisa memilih elemen dengan nama dengan jQuery?

1227

Punya kolom tabel yang saya coba rentangkan dan sembunyikan:

jQuery tampaknya menyembunyikan tdelemen ketika saya memilihnya berdasarkan kelas tetapi tidak dengan nama elemen .

Misalnya, mengapa: 

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

Perhatikan HTML di bawah ini, kolom kedua memiliki nama yang sama untuk semua baris. Bagaimana saya bisa membuat koleksi ini menggunakan nameatribut?

<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
sumber
7
Pertanyaan tidak cocok dengan konten. ID dan nama adalah atribut yang berbeda dan dipilih secara berbeda
Mark W
12
Ini bertentangan dengan standar W3C untuk memiliki elemen dengan ID yang sama; yaitu ID duplikat adalah tidak, tidak.
Steve Tauber

Jawaban:

2178

Anda dapat menggunakan pemilih atribut 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
sumber
1
Hanya ingin tahu, bagaimana orang menulis ini sebagai TIDAK tcol1, seperti bagaimana jika mereka ingin menyembunyikan kolom selain kolom yang dinamai, tcol1?
HPWD
25
@ Varun - Anda bisa menghilangkan td ... misalnya $ ('[name ^ = tcol]') akan cocok dengan semua elemen yang memiliki atribut 'nama' dengan nilai yang dimulai dengan 'tcol'
Jon Erickson
Saya harus menggunakannya seperti $ ('td [name = tcol1]') - tanpa ruang antara td dan [] mengembalikan saya NULL.
akki
@ DougMolineux Sebenarnya, dia mencocokkan pre fix sebuah nama.
mareoraft
7
@ HPWD Anda akan menggunakan: not selector, $("td:not([name='tcol1'])")misalnya. Anda dapat melihatnya di biola ini
JohannesB
224

Atribut apa pun dapat dipilih menggunakan [attribute_name=value]cara. Lihat sampel di sini :

var value = $("[name='nameofobject']");
pengguna2804791
sumber
tetapi Anda harus menggunakan kode di atas, sehingga Anda tidak ketinggalan dengan qoutations! Selamat mencoba dan selamat datang di komunitas Stackoverflow :)
Afzaal Ahmad Zeeshan
7
Ini tidak bekerja setidaknya untuk saya - Tapi pernyataan berikut bekerjavar value = $("[name=nameofobject]");
Pranav
2
Sangat mengejutkan bahwa ini mendapatkan 17 upvotes ketika ini datang 4 tahun setelah jawaban yang diterima asli
Huangism
6
21 mengalami peningkatan sekarang ... mungkin itu karena jawabannya kurang membingungkan daripada 'td [name = tcol1]', terutama karena td tidak diperlukan dan karenanya mengarahkan orang-orang seperti saya ke jalan yang salah
Chris Sprague
2
Nama saya masukan memiliki [] seperti ini: <input name="itemid[]">. Jadi jawaban ini bekerja lebih sempurna daripada jawaban yang diterima, berkat penggunaan kutipan yang tepat.
Sunish Menon
62

Jika Anda memiliki sesuatu seperti:

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

Anda dapat membaca semua seperti ini:

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

Cuplikan:

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">
Luaskan cuplikan

Andreas L.
sumber
26

Anda bisa mendapatkan array elemen dengan nama cara kuno dan meneruskan array itu ke 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>
Luaskan cuplikan

Catatan: satu-satunya saat Anda memiliki alasan untuk menggunakan atribut "nama" adalah untuk kotak centang atau input radio.

Atau Anda bisa menambahkan kelas lain ke elemen untuk seleksi. (Inilah yang akan saya lakukan)

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>
Luaskan cuplikan

Temanmu Ken
sumber
24

Anda bisa mendapatkan nilai nama dari bidang input menggunakan elemen nama di jQuery dengan:

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>
Luaskan cuplikan

Shrikant D
sumber
+1 Satu-satunya contoh yang diberikan yang memilih bidang nama termasuk jenis dan membatasi hasil dalam bagian id.
SharpC
Saya setuju. Anda dapat memiliki beberapa formulir di halaman Anda, dan membatasi ke bentuk yang tepat adalah ide yang bagus.
Kar.ma
15

Kerangka kerja biasanya menggunakan nama braket dalam bentuk, seperti:

<input name=user[first_name] />

Mereka dapat diakses dengan:

// 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
sumber
6

Anda lupa kumpulan tanda kutip kedua, yang membuat jawaban yang diterima salah:

$('td[name="tcol1"]')
Chris J
sumber
misalnya jika nama bidangnya adalah'td[name="nested[fieldName]"]'
relytmcd
Ini sangat benar. Versi jQuery yang lebih baru (v. 3.2.1) jauh lebih mungkin gagal ketika menemukan elemen pemilih berbasis atribut tanpa penawaran yang tepat.
HoldOffHunger
5

Inilah solusi sederhana: $('td[name=tcol1]')

Tamu
sumber
3

Anda bisa mendapatkan elemen di JQuery dengan menggunakan atribut ID-nya seperti ini:

$("#tcol1").hide();
CalebHC
sumber
4
Cocok dengan satu elemen saja
TTT
2
Maaf soal itu. Lakukan saja apa yang dikatakan Ben S.
CalebHC
Ya itu benar tentang ID. Sejauh memilih berdasarkan nama, saya pikir ada posting di sini yang merujuk pada Selectors / attributeEquals yang sangat membantu.
TTT
1
Mungkin pertanyaannya sudah diedit, tetapi dia meminta referensi nama sekarang, tapi ya elemen tunggal dapat menggunakan pemilih id
nckbrz
Pertanyaan sebenarnya untuk nama
Prathamesh Lebih
3

Anda dapat menggunakan atribut apa pun sebagai pemilih dengan [attribute_name=value].

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

sumber
3

Secara pribadi, apa yang telah saya lakukan di masa lalu adalah memberi mereka id kelas umum dan menggunakannya untuk memilih mereka. Ini mungkin tidak ideal karena mereka memiliki kelas yang ditentukan yang mungkin tidak ada, tetapi itu membuat seleksi jauh lebih mudah. Pastikan Anda unik di nama kelas Anda.

yaitu untuk contoh di atas saya akan menggunakan pilihan Anda berdasarkan kelas. Lebih baik lagi mengubah nama kelas dari huruf tebal menjadi 'tcol1', jadi Anda tidak mendapatkan inklusi tidak disengaja ke dalam hasil jQuery. Jika huruf tebal sebenarnya merujuk ke kelas CSS, Anda selalu dapat menentukan keduanya di properti kelas - yaitu 'class = "tcol1 bold"'.

Singkatnya, jika Anda tidak dapat memilih berdasarkan Nama, gunakan pemilih jQuery yang rumit dan terima hit kinerja terkait atau gunakan penyeleksi Kelas.

Anda selalu dapat membatasi ruang lingkup jQuery dengan memasukkan nama tabel yaitu $ ('# tableID> .bold')

Itu seharusnya membatasi jQuery dari pencarian "dunia".

Itu masih bisa digolongkan sebagai pemilih yang rumit, tetapi dengan cepat membatasi pencarian apa pun di dalam tabel dengan ID '#tableID', jadi jaga pemrosesan menjadi minimum.

Alternatif dari ini jika Anda mencari lebih dari 1 elemen dalam # table1 akan mencari ini secara terpisah dan kemudian meneruskannya ke jQuery karena ini membatasi ruang lingkup, tetapi menyimpan sedikit pemrosesan untuk mencarinya setiap kali.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
Steve Childs
sumber
Agak bertele-tele jawaban, tetapi ini secara fundamental pendekatan keseluruhan yang benar.
HoldOffHunger
2
Mungkin sedikit bertele-tele, tetapi lebih baik memiliki sedikit penjelasan dan alasan tambahan di balik saran daripada satu baris yang menjelaskan sedikit! ;) Ini berguna ketika seseorang baru dalam sesuatu dan mencoba memahami mengapa a) ia bekerja dan b) cara kerjanya
Steve Childs
-13

Anda dapat menggunakan fungsi ini:

get.elementbyId();
Pratyush Goyal
sumber
2
OP ingin mendapatkan nama , bukan id. Dan apa itu get.elementbyId()? Apakah maksud Anda document.getElementById()?
barbsan
8
Tidak, dia meminta untuk memilih elemen berdasarkan nama.
barbsan