JQuery ile bir öğeyi ada göre nasıl seçebilirim?

1226

Genişletmek ve gizlemek çalışıyorum bir tablo sütun var:

jQuery tdöğeleri sınıfına göre seçtiğimde öğeleri gizliyor gibi görünüyor ama öğenin adına göre değil .

Örneğin, neden:

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

Aşağıdaki HTML'ye dikkat edin, ikinci sütun tüm satırlar için aynı ada sahiptir. Bu koleksiyonu nameözelliği kullanarak nasıl oluşturabilirim ?

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

— TTT
kaynak

7

Soru, içerikle eşleşmiyor. Kimlik ve ad farklı özelliklerdir ve farklı şekilde seçilir

— Mark W

12

Aynı kimliğe sahip elemanlara sahip olmak W3C standartlarına aykırıdır; örneğin, yinelenen kimlikler hayır hayırdır.

— Steve Tauber

2177

JQuery öznitelik seçicisini kullanabilirsiniz :

$('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
kaynak

1

Sadece meraktan, tcol1 DEĞİL tcol1 olarak nasıl yazılır, tcol1 adlı sütunlar dışındaki sütunları gizlemek isteseydi?

— HPWD

25

@Varun - td'yi atlayabilirsiniz ... örneğin $ ('[name ^ = tcol]') 'name' özniteliğine sahip tüm öğeleri 'tcol' ile başlayan bir değerle eşleştirecektir

— Jon Erickson

$ ('Td [name = tcol1]') gibi kullanmak zorunda kaldım - td ve [] arasındaki boşluk olmadan beni NULL döndürdü.

— akki

@DougMolineux Aslında, bir ismin ön düzeltmesiyle eşleşiyor .

— mareoraft

7

@ HPWD, $("td:not([name='tcol1'])")örneğin : değil seçiciyi kullanırsınız . Bunu bu kemanda

— JohannesB

224

Herhangi bir özellik yol kullanılarak seçilebilir [attribute_name=value]. Buradaki örneğe bakın :

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

— user2804791
kaynak

ama yukarıdaki kodu kullanmalısınız, böylece qoutations ile kaçırmayın! İyi şanslar ve Stackoverflow topluluğuna hoş geldiniz :)

— Afzaal Ahmad Zeeshan

7

Bu en azından benim için çalışmıyor - Ama aşağıdaki ifade işe yarıyorvar value = $("[name=nameofobject]");

— Pranav

2

Bu, orijinal kabul edilen cevaptan 4 yıl sonra geldiğinde 17 puan alması şaşırtıcı

— Huangism

6

21 şimdi oy veriyor ... belki de cevap 'td [name = tcol1]' den daha az kafa karıştırıcı olduğu için, özellikle de td gerekli olmadığından ve bu yüzden benim gibi insanları yanlış yola yönlendirdiğinden

— Chris Sprague

2

Benim girdi adları [] böyle oldu: <input name="itemid[]">. Bu yüzden, tırnakların doğru kullanımı sayesinde bu cevap kabul edilen cevaptan daha mükemmel çalıştı.

— Sunish Menon

62

Gibi bir şey varsa:

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

Hepsini şöyle okuyabilirsiniz:

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

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

Snippet'i genişlet

— Andreas L.
kaynak

26

Eleman dizisini eski moda bir şekilde isimlendirebilir ve bu diziyi jQuery'ye geçirebilirsiniz.

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>

Snippet'i genişlet

not: "name" özelliğini kullanmak için bir nedeniniz olduğunda, onay kutusu veya radyo girişleri için olmalıdır.

Ya da sadece seçim için öğelere başka bir sınıf ekleyebilirsin.

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>

Snippet'i genişlet

— Arkadaşın Ken
kaynak

24

JQuery'deki ad öğesini kullanarak bir giriş alanından ad değerini alabilirsiniz:

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>

Snippet'i genişlet

— Shrikant D
kaynak

+1 Tür içeren bir ad alanı seçen ve sonuçları bir kimlik bölümündeki sonuçları sınırlayan tek örnek.

— SharpC

Katılıyorum. Sayfanızda birden çok form olabilir ve uygun formla kısıtlamak iyi bir fikirdir.

— Kar.ma

15

Çerçeveler genellikle parantez adlarını şu şekillerde kullanır :

<input name=user[first_name] />

Bunlara şu yollarla erişilebilir:

// 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
kaynak

13

Ben böyle yaptım ve işe yarıyor:

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

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

— kscius
kaynak

5

İşte basit bir çözüm: $('td[name=tcol1]')

— Misafir
kaynak

5

Kabul edilen cevabı yanlış yapan ikinci tırnak setini unuttun:

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

— Chris J
kaynak

örneğin, alan adı'td[name="nested[fieldName]"]'

— relytmcd

Bu çok doğrudur. JQuery'nin (v. 3.2.1) daha yeni sürümlerinin, özniteliğe dayalı bir seçici öğeyle düzgün alıntı yapmadan karşılaşma durumunda başarısız olma olasılığı daha yüksektir.

— HoldOffHunger

3

JQuery'de, ID özniteliğini şu şekilde kullanarak öğeyi alabilirsiniz:

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

— CalebHC
kaynak

4

Yalnızca tek bir öğeyle

— eşleşir

2

Bunun için üzgünüm. Ben S'nin söylediklerini yap.

— CalebHC

Evet bu kimlik için doğrudur. Bildiğim kadarıyla isme göre seçerken, burada Selectors / attributeEquals'a atıfta bulunan bir yazı olduğunu düşünüyorum.

— TTT

1

Belki soru düzenlenmiştir, ancak şimdi ad referansı istiyor, ancak evet tek öğeler kimlik seçiciyi kullanabilir

— nckbrz

Aslında isim için soru

— Prathamesh Daha

3

İle herhangi bir niteliği seçici olarak kullanabilirsiniz [attribute_name=value].

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

3

Şahsen, geçmişte yaptığım şey onlara ortak bir sınıf kimliği vermek ve bunları seçmek için kullandı. Var olmayan bir sınıf belirttikleri için ideal olmayabilir, ancak seçimi çok daha kolay hale getirir. Sadece sınıf adlarınızda benzersiz olduğunuzdan emin olun.

yani yukarıdaki örnek için seçiminizi sınıfa göre kullanırım. Sınıf adını kalın yerine 'tcol1' olarak değiştirmek daha iyidir, böylece jQuery sonuçlarına yanlışlıkla dahil edilmezsiniz. Bold aslında bir CSS sınıfına atıfta bulunuyorsa, her zaman class özelliğinde her ikisini de belirtebilirsiniz - yani 'class = "tcol1 bold"'.

Özet olarak, Ad ile seçim yapamıyorsanız, karmaşık bir jQuery seçici kullanın ve ilgili performans isabeti kabul edin veya Sınıf seçicileri kullanın.

JQuery kapsamını her zaman tablo adını yani $ ('# tableID> .bold') ekleyerek sınırlayabilirsiniz.

Bu, jQuery'nin "dünya" yı aramasını kısıtlamalıdır.

Yine de karmaşık bir seçici olarak sınıflandırılabilir, ancak tablodaki herhangi bir aramayı '#tableID' kimliği ile hızla kısıtlar, bu nedenle işlemi minimumda tutar.

# Table1 içinde 1'den fazla öğe arıyorsanız, bunun bir alternatifi bunu ayrı ayrı aramak ve daha sonra kapsamı sınırladığı için jQuery'ye geçirmek olacaktır, ancak her seferinde aramak için biraz işlem kaydeder.

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

— Steve Childs
kaynak

Biraz garip bir cevap, ama bu temel olarak doğru genel yaklaşım.

— HoldOffHunger

2

Biraz garip olabilir, ancak biraz daha açıklayan tek bir satırdan daha fazla bir öneri ve akıl yürütmenin arkasında biraz daha iyi bir açıklama olabilir! ;) Birisi bir şeye yeni geldiğinde ve neden a) işe yaradığını ve b) nasıl çalıştığını anlamaya çalışırken yararlıdır

— Steve Childs

-13

İşlevi kullanabilirsiniz:

get.elementbyId();

— Pratyush Goyal
kaynak

2

OP kimliğe göre değil, ada göre almak istiyordu . Peki nedir get.elementbyId()? Bunu mu demek istediniz document.getElementById()?

— barbsan

8

Hayır, adıyla bir öğe seçmesini istiyor.

— barbsan