Як я можу вибрати елемент за назвою за допомогою jQuery?

1225

Майте стовпець таблиці, яку я намагаюся розгорнути і приховати:

jQuery, схоже, приховує tdелементи, коли я вибираю його за класом, а не за ім'ям елемента .

Наприклад, чому:

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

Зауважте HTML нижче, другий стовпець має однакову назву для всіх рядків. Як я можу створити цю колекцію за допомогою 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>

— TTT
джерело

7

Питання не відповідає змісту. Ідентифікатор та ім’я є різними атрибутами та вибираються по-різному

— Марк Ш

12

Це проти стандартів W3C мати елементи з однаковим ідентифікатором; тобто дублюючі ідентифікатори - це не ні.

— Стів Таубер

2175

Ви можете використовувати селектор атрибутів 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, як, що, якби вони хотіли приховати стовпчики, окрім названих стовпців, tcol1?

— HPWD

25

@Varun - ви можете просто опустити td ... наприклад $ ('[ім'я ^ = tcol]') буде відповідати всім елементам, які мають атрибут 'name', зі значенням, яке починається з 'tcol'

— Джон Еріксон,

Мені довелося використовувати його як $ ('td [name = tcol1]') - без пробілу між td та [] він повернув мені NULL.

— akki

@DougMolineux Насправді він відповідає попередньому виправленню імені.

— мареофт

7

@HPWD ви б використовували, $("td:not([name='tcol1'])")наприклад, селектор:. Ви можете побачити це у цій скрипці

— ЙоханнесB

224

Будь-який атрибут можна вибрати за допомогою [attribute_name=value]способу. Дивіться зразок тут :

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

— user2804791
джерело

але вам слід скористатися вищевказаним кодом, щоб ви не пропустили цитати! Успіхів і ласкаво просимо до спільноти Stackoverflow :)

— Афзаал Ахмад Зеешан

7

Принаймні для мене це не працює - Але наступна заява працюєvar value = $("[name=nameofobject]");

— Пранав,

2

Це дивно, що отримано 17 оновлень, коли це надійшло через 4 роки після первісно прийнятої відповіді

— Хуанізм

6

21 заявок зараз ... можливо, це тому, що відповідь менш заплутаний, ніж "td [name = tcol1]", тим більше, що td не потрібен, а значить, веде таких людей, як я, неправильним шляхом

— Кріс Спрайг,

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

Розгорніть фрагмент

— Андреас Л.
джерело

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:

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>

Розгорніть фрагмент

— Шрікант Д
джерело

+1 Єдиний приклад, який вибирає поле імені, включаючи тип та обмежує результати в розділі ідентифікатора.

— SharpC

Я згоден. Ви можете мати кілька форм на своїй сторінці, а обмеження правильної - хороша ідея.

— Kar.ma

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

— ітніколай
джерело

13

Я зробив так, і це працює:

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

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

— kscius
джерело

5

Ось просте рішення: $('td[name=tcol1]')

— Гість
джерело

5

Ви забули другий набір цитат, що робить прийняту відповідь невірною:

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

— Кріс Дж
джерело

наприклад, якщо назва поля'td[name="nested[fieldName]"]'

— relatmcd

Це дуже правда. Новіші версії jQuery (т. 3.2.1) набагато частіше виходять з ладу при зіткненні з селекторним елементом на основі атрибутів без належного котирування.

— HoldOffHunger

3

Ви можете отримати елемент у JQuery, використовуючи такий його атрибут:

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

— CalebHC
джерело

4

Відповідає лише одному елементу

— TTT

2

Вибач за те. Просто роби те, що сказав Бен С.

— CalebHC

Так, це правда щодо ідентифікатора. Що стосується вибору по імені, я думаю, що тут було повідомлення, що стосується селекторів / attributeEquals, що було корисно.

— TTT

1

Можливо, питання було відредаговано, але він зараз просить

— вказати

Питання власне до імені

— Prathamesh More

3

Ви можете використовувати будь-який атрибут як селектор [attribute_name=value].

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

3

Особисто те, що я робив у минулому, - це дати їм загальний ідентифікатор класу та використати його для їх вибору. Це може бути не ідеально, оскільки у них вказаний клас, який може не існувати, але це робить вибір набагато простішим. Просто переконайтеся, що ви унікальні у своїх іменах класів.

тобто для наведеного вище прикладу я б використав ваш вибір за класом. Ще краще було б змінити назву класу з жирного на 'tcol1', тому ви не отримаєте жодних випадкових включень у результати jQuery. Якщо жирний шрифт насправді посилається на клас CSS, ви завжди можете вказати обидва у властивості класу - тобто 'class = "tcol1 bold' '.

Підсумовуючи це, якщо ви не можете вибрати за ім'ям, або скористайтеся складним селектором jQuery і прийміть будь-який відповідний хіт продуктивності або використовуйте селектори.

Ви завжди можете обмежити область jQuery, включивши ім'я таблиці, тобто $ ('# tableID> .bold')

Це повинно обмежити jQuery від пошуку "світу".

Його все ще можна класифікувати як складний селектор, але він швидко обмежує будь-який пошук всередині таблиці з ідентифікатором '#tableID', тому зводить обробку до мінімуму.

Альтернативою цьому, якщо ви шукаєте більше 1 елемента в # 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

Може бути трохи словесно, але краще мати трохи додаткових пояснень та міркувань щодо пропозиції, ніж один рядок, який пояснює мало! ;) Це корисно, коли хтось у чомусь новачок і намагається зрозуміти, чому а) це працює і б) як це працює

— Стів Чайлдс

-13

Ви можете використовувати функцію:

get.elementbyId();

— Пратюш Гоял
джерело

2

ОП хотів отримати по імені , а не за ідентифікатором. А що таке get.elementbyId()? Ви мали на увазі document.getElementById()?

— барбасан

8

Ні, він просить вибрати елемент по імені.

— барбасан