Как я могу выбрать элемент по имени с помощью jQuery?

avatar
T.T.T.
10 июля 2009 в 01:05
1780376
14
1386

У меня есть столбец таблицы, который я пытаюсь раскрыть и скрыть. Кажется, что jQuery скрывает элементы <td>, когда я выбираю их по class, но не по name элемента.

Например:

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

Обратите внимание на HTML-код ниже. Второй столбец имеет одинаковый name для всех строк. Как я могу создать эту коллекцию с помощью атрибута 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>
Источник
Mark W
22 августа 2011 в 13:08
8

Вопрос не соответствует содержанию. ID и имя - разные атрибуты и выбираются по-разному

Steve Tauber
17 февраля 2013 в 01:28
13

Наличие элементов с одинаковым идентификатором противоречит стандартам W3C; то есть повторяющиеся идентификаторы - это нет-нет.

Sebastian Simon
18 марта 2021 в 11:31
0

Спецификация CSS включает новый комбинатор столбцов, поэтому вскоре вы можете просто выбрать document.querySelectorAll("td || col.secondColumn"), если у вас есть <colgroup><col class="firstColumn"/><col class="secondColumn"/></colgroup>.

Ответы (14)

avatar
Jon Erickson
10 июля 2009 в 01:21
2449

Вы можете использовать селектор атрибутов 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'
Jon Erickson
9 июля 2012 в 06:36
33

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

avatar
Kamil Kiełczewski
16 июня 2020 в 20:33
2

Производительность

Сегодня (2020.06.16) я выполняю тесты для выбранных решений на MacOs High Sierra в Chrome 83.0, Safari 13.1.1 и Firefox 77.0.

Выводы

Получить элементы по имени

  • 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) довольно медленные для больших таблиц

enter image description here

Подробности

Я выполняю два теста для чтения элементов по имени (A, B, C, D) и скрываю эти элементы (E, F, G, H, I)

  • маленькая таблица - 3 строки - вы можете запустить тест ЗДЕСЬ
  • большая таблица - 1000 строк - вы можете запустить тест ЗДЕСЬ

В фрагменте ниже представлены использованные коды

//https://coderhelper.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

enter image description here

ericksho
15 марта 2021 в 19:59
1

отличная информация, но много вещей, которые не отвечают на вопрос, это просто связанные знания

avatar
Pratyush Goyal
19 июня 2019 в 07:08
-16

Вы можете использовать функцию:

get.elementbyId();
barbsan
19 июня 2019 в 07:39
4

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

barbsan
19 июня 2019 в 07:47
10

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

avatar
Chris J
20 ноября 2017 в 19:27
9

Вы забыли второй набор кавычек, поэтому принятый ответ неверен:

$('td[name="tcol1"]') 
relytmcd
13 июня 2018 в 23:57
0

например, если имя поля 'td[name="nested[fieldName]"]'

HoldOffHunger
27 июня 2018 в 18:03
0

Это правда. Более новые версии jQuery (v. 3.2.1) с гораздо большей вероятностью потерпят неудачу при обнаружении элемента селектора на основе атрибутов без надлежащего заключения в кавычки.

avatar
Guest
27 апреля 2016 в 18:47
5

Вот простое решение: $('td[name=tcol1]')

avatar
user6139189
31 марта 2016 в 12:51
4

Вы можете использовать любой атрибут в качестве селектора с [attribute_name=value].

$('td[name=tcol1]').hide();
avatar
itsnikolay
16 октября 2015 в 16:27
19

Фреймворки обычно используют имена скобок в таких формах, как:

<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]\"]")
avatar
Shrikant D
15 июня 2015 в 05:52
26

Вы можете получить значение имени из поля ввода, используя элемент имени в 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>
avatar
kscius
25 марта 2015 в 20:27
14

Я сделал вот так, и это работает:

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

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

avatar
Steve Childs
23 февраля 2015 в 12:16
2

Лично я раньше давал им общий идентификатор класса и использовал его для их выбора. Это может быть не идеально, поскольку у них указан класс, который может не существовать, но это значительно упрощает выбор. Просто убедитесь, что ваши имена классов уникальны.

т.е. в приведенном выше примере я бы использовал ваш выбор по классам. Еще лучше было бы изменить имя класса с полужирного на «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); 
}
avatar
Andreas L.
9 июля 2014 в 18:34
71

Если у вас что-то вроде:

<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">
avatar
user2804791
22 сентября 2013 в 19:07
277

Любой атрибут можно выбрать с помощью [attribute_name=value] способа. См. Образец здесь:

var value = $("[name='nameofobject']");
avatar
Your Friend Ken
11 июля 2009 в 05:25
28

Вы могли получить массив элементов по имени старомодным способом и передать этот массив в 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>
avatar
CalebHC
10 июля 2009 в 01:09
3

Вы можете получить элемент в JQuery, используя его атрибут ID следующим образом:

$("#tcol1").hide();
dylanh724
15 августа 2021 в 07:40
0

OP спрашивает по имени, а не по идентификатору