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

Question

展開および非表示にしようとしているテーブル列があります。jQueryは、<td>要素を選択したときに要素を非表示にしているようですclassが、要素のによっては非表示になっているようnameです。

例えば：

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

以下のHTMLに注意してください。name2番目の列は、すべての行で同じです。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>

score 2544 · Accepted Answer

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'

score 291 · Accepted Answer

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

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

score 78 · Accepted Answer

あなたが次のようなものを持っている場合：

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

score 29 · Accepted Answer

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

score 28 · Accepted Answer

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>

score 19 · Accepted Answer

フレームワークは通常、次のようなフォームで角かっこ名を使用します。

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

score 15 · Accepted Answer

私はこのようにしました、そしてそれは働きます：

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

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

score 10 · Accepted Answer

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

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

score 5 · Accepted Answer

5

簡単な解決策は次のとおりです。$('td[name=tcol1]')

于 2016-04-27T18:47:53.033 に答える

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

パフォーマンス

今日（2020.06.16）Chrome 83.0、Safari 13.1.1、Firefox77.0のMacOsHighSierraで選択したソリューションのテストを実行します。

結論

名前で要素を取得する

getElementByName（C）は、大小の配列のすべてのブラウザーにとって最速のソリューションですが、おそらく私はある種の遅延読み込みソリューションであるか、名前と要素のペアを持つ内部ブラウザーハッシュキャッシュを使用します
混合js-jqueryソリューション（B）はquerySelectorAll（D）ソリューションよりも高速です
純粋なjqueryソリューション（A）が最も遅い

名前で行を取得し、それらを非表示にします（事前に計算されたネイティブソリューション（I）-理論的には最速）を比較から除外します-参照として使用されます）

驚くべきことに、js-jqueryの混合ソリューション（F）は、すべてのブラウザーで最速です。
驚くべきことに、事前に計算されたソリューション（I）は、大きなテーブルのjquery（E、F）ソリューションよりも遅いです（!!!）-.hide（）jQueryメソッド"default:none"が非表示の要素にスタイルを設定していることを確認します-しかし、彼らはより速い方法を見つけているようですそれよりもelement.style.display='none'
jquery（E）ソリューションは大きなテーブルで非常に高速です
jquery（E）およびquerySelectorAll（H）ソリューションは、小さなテーブルでは最も低速です
getElementByName（G）およびquerySelectorAll（H）ソリューションは、大きなテーブルでは非常に低速です

詳細

名前（ A、B、C、D ）で要素を読み取るために2つのテストを実行し、その要素（E、F、G、H、I）を非表示にします

小さなテーブル-3行-ここでテストを実行できます
大きなテーブル-1000行-ここでテストを実行できます

以下のスニペットは使用済みコードを示しています

//https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery#

// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1

function A() {
  return $('[name=tcol1]');
}

function B() {
  return $(document.getElementsByName("tcol1"))
}

function C() {
  return document.getElementsByName("tcol1")
}

function D() {
  return document.querySelectorAll('[name=tcol1]')
}

function E() {
  $('[name=tcol1]').hide();
}

function F() {
  $(document.getElementsByName("tcol1")).hide();
}

function G() {
  document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); 
}

function H() {
  document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); 
}

function I() {
  let elArr = [...document.getElementsByName("tcol1")];
  let length = elArr.length
  for(let i=0; i<length; i++) elArr[i].style.display='none';
}




// -----------
// TEST
// -----------

function reset() { $('td[name=tcol1]').show(); } 

[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
  <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>
</table>

<button onclick="E()">E: hide</button>
<button onclick="F()">F: hide</button>
<button onclick="G()">G: hide</button>
<button onclick="H()">H: hide</button>
<button onclick="I()">I: hide</button><br>
<button onclick="reset()">reset</button>

Chromeでの結果の例

score 2 · Accepted Answer

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

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

要約すると、名前で選択できない場合は、複雑な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); 
}

score -2 · Accepted Answer

-2

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

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

于 2009-07-10T01:09:39.187 に答える

score -21 · Accepted Answer

-21

次の機能を使用できます。

get.elementbyId();

于 2019-06-19T07:08:53.600 に答える

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

14 に答える 14

パフォーマンス

結論

詳細

Related

Reference