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

Есть столбец таблицы, который я пытаюсь развернуть и скрыть:

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>
10.07.2009 01:05:38
Вопрос не соответствует содержанию. Идентификатор и имя - это разные атрибуты, и они выбираются по-разному.
Mark W 22.08.2011 13:08:38
Это противоречит стандартам W3C иметь элементы с одинаковым идентификатором; т.е. повторяющиеся идентификаторы являются нет нет.
Steve Tauber 17.02.2013 01:28:22
13 ОТВЕТОВ
РЕШЕНИЕ

Вы можете использовать селектор атрибутов 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'
2150
1.10.2019 22:08:32
Просто из любопытства, как можно записать это как NOT tcol1, например, что если они хотят скрыть столбцы, отличные от именованных столбцов, tcol1?
HPWD 3.02.2012 17:52:25
@Varun - вы можете просто опустить td ... например, $ ('[name ^ = tcol]') будет сопоставлять все элементы, имеющие атрибут 'name', со значением, начинающимся с 'tcol'
Jon Erickson 9.07.2012 06:36:53
Мне пришлось использовать его как $ ('td [name = tcol1]') - без пробела между td и [] он вернул мне NULL.
akki 17.12.2014 11:14:41
@DougMolineux На самом деле, он соответствует предварительному исправлению имени.
mareoraft 17.10.2015 16:51:42
@HPWD вы бы использовали: не селектор, $("td:not([name='tcol1'])")например. Вы можете видеть это на этой скрипке
JohannesB 11.05.2016 11:51:47

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

$("#tcol1").hide();
3
10.07.2009 01:09:39
Соответствует только одному элементу
T.T.T. 10.07.2009 01:10:32
Прости за это. Просто сделай то, что сказал Бен С.
CalebHC 10.07.2009 01:14:23
Да, это правда об удостоверении личности. Что касается выбора по имени, я думаю, что здесь был пост, ссылающийся на Selectors / attributeEquals, который был полезен.
T.T.T. 10.07.2009 01:21:16
Возможно, вопрос был отредактирован, но сейчас он запрашивает ссылку на имя, но да, отдельные элементы могут использовать селектор идентификатора
nckbrz 2.11.2014 15:29:41

Вы можете получить массив элементов по имени по старинке и передать этот массив в 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>

примечание: единственный раз, когда у вас будет причина использовать атрибут «имя», должен быть флажок или радиовходы.

Или вы можете просто добавить другой класс к элементам для выбора (это то, что я бы сделал)

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>

26
7.08.2016 19:52:57

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

var value = $("[name='nameofobject']");
219
23.12.2014 18:57:43
но вы должны использовать приведенный выше код, чтобы не пропустить цитаты! Удачи и добро пожаловать в сообщество Stackoverflow :)
Afzaal Ahmad Zeeshan 22.09.2013 19:11:32
Это не работает, по крайней мере, для меня - Но следующее утверждение работаетvar value = $("[name=nameofobject]");
Pranav 22.09.2014 06:28:10
Удивительно, что это получило 17 голосов, когда это произошло через 4 года после первоначального принятого ответа
Huangism 25.03.2015 20:41:48
21 возражений сейчас ... возможно, это потому, что ответ менее запутанный, чем 'td [name = tcol1]', тем более что td не требуется и, следовательно, ведет таких людей, как я, по ложному пути
Chris Sprague 9.06.2015 06:03:17
Мои входные имена имели [] , как это: <input name="itemid[]">. Таким образом, этот ответ работал лучше, чем принятый ответ, благодаря правильному использованию кавычек.
Sunish Menon 30.07.2016 07:48:52

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

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

61
7.08.2016 20:02:31

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

то есть для примера выше я бы использовал ваш выбор по классу. Еще лучше изменить имя класса с жирного на «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); 
}
3
27.06.2018 18:01:38
Несколько многословный ответ, но в целом это правильный подход.
HoldOffHunger 27.06.2018 18:01:09
Может быть немного многословно, но лучше иметь несколько дополнительных объяснений и аргументов в пользу предложения, чем единственная строка, которая мало что объясняет! ;) Это полезно, когда кто-то новичок в чем-то и пытается понять, почему а) это работает и б) как это работает
Steve Childs 28.06.2018 15:38:05

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

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

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

13
25.03.2015 21:22:01

Вы можете получить значение имени из поля ввода, используя элемент name в 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>

24
7.08.2016 20:08:22
+1 Единственный приведенный пример, который выбирает поле имени, включая тип, и ограничивает результаты в пределах секции id.
SharpC 6.10.2015 15:58:50
Согласен. Вы можете иметь несколько форм на своей странице, и ограничение на правильную является хорошей идеей.
Kar.ma 19.05.2016 16:34: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]\"]")
15
16.10.2015 16:32:17

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

$('td[name=tcol1]').hide();
3
31.03.2016 12:51:10

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

5
27.04.2016 19:26:37

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

$('td[name="tcol1"]') 
5
20.11.2017 19:27:54
например, если имя поля'td[name="nested[fieldName]"]'
relytmcd 13.06.2018 23:57:08
Это очень верно. Более новые версии jQuery (v. 3.2.1) с большей вероятностью потерпят неудачу при обнаружении элемента селектора на основе атрибутов без надлежащего цитирования.
HoldOffHunger 27.06.2018 18:03:55

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

get.elementbyId();
-11
19.06.2019 07:44:00
ОП хотел получить по имени , а не по идентификатору. А что есть get.elementbyId()? Вы имели в виду document.getElementById()?
barbsan 19.06.2019 07:39:38
Нет, он просит выбрать элемент по имени.
barbsan 19.06.2019 07:47:09