web-dev-qa-db-ja.com

JQueryを使用して名前で要素を選択する方法

展開したり隠したりしようとしているテーブルの列があります。

jQueryは、 class で選択するとtd要素を非表示にしますが、要素の name では選択しません。

例えば、なぜそうするのか：

$(".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>
javascriptjqueryhtmldomjquery-selectors
1073
T.T.T.

attribute セレクタを使うことができます。

$('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'
1947
Jon Erickson

どの属性でも[attribute_name=value]の方法で選択できます。サンプルを見る ここ ：

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

次のようなものがあります。

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

昔ながらの方法で要素の配列を取得し、その配列を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
Your Friend Ken

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

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

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

私はこのようにやったし、それは動作します：

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

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

12
kscius

これが簡単な解決策です：$('td[name=tcol1]')

5
Guest

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

すなわち上記の例では、私はあなたの選択をクラスで使います。それでも、クラス名を太字から 'tcol1'に変更することをお勧めします。そのため、jQueryの結果に誤ってインクルードされることはありません。太字が実際にCSSクラスを参照している場合は、クラスプロパティで常に両方を指定できます。つまり、 'class = "tcol1 bold"'です。

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

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

それはjQueryが「世界」を検索するのを制限するはずです。

それはまだ複雑なセレクタとして分類されるかもしれません、しかしそれは '#tableID'のIDでテーブル内の検索を素早く制限するので、処理を最小に保ちます。

＃table1内で複数の要素を検索する場合、これを代替する方法として、これを個別に検索してjQueryに渡すことができます。ただし、範囲が制限されますが、毎回検索するための処理が少し省けます。

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

2番目の引用符を忘れたため、受け入れられた回答が正しくありません。

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

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

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

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

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