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

1228

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

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>

javascript jquery html dom jquery-selectors ТТТ
источник

7

Вопрос не соответствует содержанию. Идентификатор и имя - это разные атрибуты, и они выбираются по-разному

Mark W

12

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

Стив Таубер

2178

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

Просто из любопытства, как можно записать это как NOT tcol1, например, что если они хотят скрыть столбцы, отличные от именованных столбцов, tcol1?

HPWD

25

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

Джон Эриксон,

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

Акки

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

15:15

7

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

JohannesB

224

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

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

user2804791
источник

но вы должны использовать приведенный выше код, чтобы не пропустить цитаты! Удачи и добро пожаловать в сообщество Stackoverflow :)

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

7

Это не работает, по крайней мере, для меня - Но следующее утверждение работаетvar value = $("[name=nameofobject]");

Пранав

2

Удивительно, что это получило 17 голосов, когда это произошло через 4 года после первоначального принятого ответа

Huangism

6

21 возражений сейчас ... возможно, это потому, что ответ менее запутанный, чем 'td [name = tcol1]', тем более что td не требуется и, следовательно, ведет таких людей, как я, по ложному пути

Крис Спраг

2

Мои входные имена имели [] , как это: <input name="itemid[]">. Таким образом, этот ответ работал лучше, чем принятый ответ, благодаря правильному использованию цитат.

Суниш Менон

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>

Развернуть фрагмент

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

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

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

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

Развернуть фрагмент

Шрикант Д
источник

+1 Единственный приведенный пример, который выбирает поле имени, включая тип, и ограничивает результаты в пределах секции id.

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

itsnikolay
источник

13

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

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

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

kscius
источник

6

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

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

Крис Дж
источник

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

relytmcd

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

HoldOffHunger

5

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

гость
источник

3

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

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

CalebHC
источник

4

Соответствует только одному элементу

TTT

2

Прости за это. Просто сделай то, что сказал Бен С.

CalebHC

Да, это правда об удостоверении личности. Что касается выбора по имени, я думаю, что здесь был пост, ссылающийся на Selectors / attributeEquals, который был полезен.

TTT

1

Может быть, вопрос был отредактирован, но теперь он запрашивает ссылку на имя, но да, отдельные элементы могут использовать селектор идентификатора

nckbrz

Вопрос на самом деле для имени

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

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

Барбсан

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

Ответы: