jQueryで要素を名前で選択するにはどうすればよいですか？

1227

展開して非表示にしようとしているテーブル列があります。

要素の名前ではなくクラスでtd選択すると、jQueryは要素を非表示にするようです。

たとえば、なぜそうなのか： 

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

以下のHTMLに注意してください。2番目の列はすべての行で同じ名前です。name属性を使用してこのコレクションを作成するにはどうすればよいですか？

<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
ソース
7
質問はコンテンツと一致しません。IDと名前は異なる属性であり、選択方法も異なります
— マークW
12
同じIDの要素を持つことはW3C標準に反しています。つまり、重複したIDは使用できません。
— スティーブタウバー

回答:

2178

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'
— ジョン・エリクソン
ソース
1
好奇心から、tcol1という名前の列以外の列を非表示にする場合のように、これをNOT tcol1としてどのように記述しますか？
— HPWD、2012
25
@Varun-tdを省略できます...たとえば、$（ '[name ^ = tcol]'）は、属性が 'name'で、 'tcol'で始まる値を持つすべての要素に一致します
— Jon Erickson
$（ 'td [name = tcol1]'）のように使用する必要がありました。tdと[]の間にスペースがないと、NULLが返されました。
— akki
@DougMolineux実は、彼はマッチングされる前の名前の修正を。
— mareoraft 2015年
7
@HPWDでは$("td:not([name='tcol1'])")、たとえば：notセレクターを使用します。あなたはこのフィドルで
— JohannesB
224

[attribute_name=value]way を使用して任意の属性を選択できます。こちらのサンプルをご覧ください。

var value = $("[name='nameofobject']");
— ユーザー2804791
ソース
ただし、上記のコードを使用して、qoutationsを見逃さないようにする必要があります。幸運とStackoverflowコミュニティへようこそ:)
— Afzaal Ahmad Zeeshan 2013
7
これは少なくとも私にとっては機能していません-しかし、次のステートメントは機能しますvar value = $("[name=nameofobject]");
— Pranav
2
これが最初の承認された回答から4年後の17票の賛成票を獲得したのは驚くべきことです
— Huangism
6
21票になりました...おそらくtd [name = tcol1]」よりも混乱が少ないためかもしれません。特に、tdは必要ないため、私のような人々を間違った道に導きます
— Chris Sprague
2
私の入力名には、次のような[]がありました<input name="itemid[]">。したがって、引用の適切な使用法のおかげで、この回答は受け入れられた回答よりも完全に機能しました。
— Sunish Menon
62

次のようなものがあれば：

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

あなたはこのようにすべて読むことができます：

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

スニペット：

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">
スニペットを展開

— アンドレアスL.
ソース
26

昔ながらの方法で名前を付けて要素の配列を取得し、その配列を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>
スニペットを展開

注：「name」属性を使用する理由があるのは、チェックボックスまたはラジオ入力の場合のみです。

または、別のクラスを要素に追加して選択することもできます（これが私が行うことです）。

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>
スニペットを展開

— あなたの友達ケン
ソース
24

jQueryのname要素を使用して入力フィールドから名前の値を取得するには、次のようにします。

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>
スニペットを展開

— シュリカントD
ソース
+1タイプを含む名前フィールドを選択し、結果をidセクション内に制限する唯一の例。
— SharpC、2015年
同意する。ページには複数のフォームを含めることができ、適切なフォームに制限することをお勧めします。
— Kar.ma 2016年
15

フレームワークは通常、次のような形式でブラケット名を使用します。

<input name=user[first_name] />

次の方法でアクセスできます。

// 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]\"]")
— イツニコライ
ソース
6

2番目の引用符のセットを忘れたため、受け入れられた回答が正しくなくなりました。

$('td[name="tcol1"]')
— クリス・J
ソース
たとえば、フィールド名が'td[name="nested[fieldName]"]'
— relytmcd
これは本当です。jQueryの新しいバージョン（v。3.2.1）は、適切な引用符なしで属性ベースのセレクター要素を検出すると、失敗する可能性が高くなります。
— HoldOffHunger 2018年
3

次のようにID属性を使用して、JQueryで要素を取得できます。

$("#tcol1").hide();
— CalebHC
ソース
4
単一の要素のみに一致
— TTT
2
申し訳ありません。ベンSの言ったことを実行してください。
— CalebHC 2009
はい、IDについてはそうです。名前による選択に関しては、セレクター/属性Equalsを参照する役立つ投稿がここにあったと思います。
— TTT
1
多分質問は編集されたかもしれませんが、彼は名前の参照を今求めていますが、はい単一の要素はidセレクターを使用できます
— nckbrz
名前の質問
— Prathamesh More
3

では、任意の属性をセレクタとして使用できます[attribute_name=value]。

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

個人的に、私が過去にやったことは、彼らに共通のクラスIDを与え、それを使ってそれらを選択することでした。存在しない可能性があるクラスが指定されているため、理想的ではない可能性がありますが、選択が非常に簡単になります。クラス名が一意であることを確認してください。

つまり、上記の例では、クラスによる選択を使用します。それでも、クラス名を太字から 'tcol1'に変更すると、jQueryの結果に誤って含まれることがなくなります。太字が実際にCSSクラスを参照している場合は、クラスプロパティで常に両方を指定できます（例： 'class = "tcol1 bold"'）。

要約すると、名前で選択できない場合は、複雑なjQueryセレクターを使用して、関連するパフォーマンスヒットを受け入れるか、クラスセレクターを使用します。

テーブル名、つまり$（ '＃tableID> .bold'）を含めることで、jQueryスコープをいつでも制限できます

これにより、jQueryによる「世界」の検索が制限されます。

それでも複雑なセレクターとして分類できますが、IDが「#tableID」のテーブル内への検索はすぐに制限されるため、処理は最小限に抑えられます。

＃table1内で複数の要素を検索する場合のこれの代替策は、これを個別に検索してからjQueryに渡すことです。これにより、スコープが制限されますが、毎回検索するための処理が少し節約されます。

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
— スティーブ・チャイルズ
ソース
少し冗長な答えですが、これは基本的に正しい全体的なアプローチです。
— HoldOffHunger
2
少し冗長かもしれませんが、少しだけ説明する単一の行よりも、提案の背後に少し余分な説明と推論をする方が良いです！;）誰かが何かに
— Steve Childs
-13

次の関数を使用できます。

get.elementbyId();
— プラティッシュゴヤル
ソース
2
OP はIDではなく名前で取得したかった。そして、何get.elementbyId()ですか？もしかしてdocument.getElementById()？
— barbsan
8
いいえ、彼は名前で要素を選択するように求めています。
— barbsan
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.