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

919

У меня есть столбец таблицы, который я пытаюсь расширить и скрыть:

Кажется, что 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>
  • 7
    Вопрос не соответствует содержанию. ID и имя являются разными атрибутами и выбираются по-разному
  • 12
    Это противоречит стандартам W3C иметь элементы с одинаковым идентификатором; т.е. повторяющиеся идентификаторы являются нет нет.
Теги:
dom
jquery-selectors

15 ответов

1721
Лучший ответ

Вы можете использовать селектор атрибутов:

$('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?
  • 3
    @ Джон Эриксон - что делать, если я не знаю тег элемента (т. Д. В данном случае), а также ..
Показать ещё 11 комментариев
168

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

var value = $("[name='nameofobject']");
Поделиться
  • 0
    но вы должны использовать приведенный выше код, чтобы не пропустить цитаты! Удачи и добро пожаловать в сообщество Stackoverflow :)
  • 7
    Это не работает, по крайней мере, для меня - но следующее утверждение работает var value = $("[name=nameofobject]");
Показать ещё 4 комментария
54

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

<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">
Поделиться
21

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

Вы можете получить значение имени из поля ввода с помощью элемента 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>
Поделиться
  • 0
    +1 Единственный приведенный пример, который выбирает поле имени, включая тип, и ограничивает результаты в пределах секции id.
  • 0
    Согласен. Вы можете иметь несколько форм на своей странице, и ограничение на правильную является хорошей идеей.
14

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

<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]\"]")
Поделиться
12

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

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

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

Поделиться
5

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

Поделиться
3

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

$('td[name=tcol1]').hide();
Поделиться
3

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

т.е. для примера выше я бы использовал ваш выбор по классу. Лучше всего было бы изменить имя класса от полужирного до "tcol1", поэтому вы не получите никаких случайных включений в результаты jQuery. Если жирный шрифт действительно относится к классу CSS, вы всегда можете указать как в свойстве класса, т.е. "class=" tcol1 bold ".

Таким образом, если вы не можете выбрать по имени, используйте либо сложный селектор jQuery, либо принимайте любое связанное с этим поражение производительности или используйте селекторы классов.

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

Это должно ограничивать jQuery поиском "мира".

Его все еще можно классифицировать как сложный селектор, но он быстро сдерживает любой поиск в таблице с идентификатором "#IDIDID", поэтому сведение к минимуму.

Альтернативой этому, если вы ищете более одного элемента в # таблице1, было бы посмотреть это отдельно, а затем передать его в jQuery, поскольку это ограничивает область действия, но сохраняет бит обработки, чтобы каждый раз просматривать его.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
Поделиться
  • 0
    Несколько многословный ответ, но это принципиально правильный общий подход.
  • 0
    Может быть немного многословно, но лучше иметь несколько дополнительных объяснений и аргументов в пользу предложения, чем единственная строка, которая мало что объясняет! ;) Это полезно, когда кто-то новичок в чем-то и пытается понять, почему а) это работает и б) как это работает
2

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

$('td[name="tcol1"]')
Поделиться
  • 0
    например, если имя поля 'td[name="nested[fieldName]"]'
  • 0
    Это очень верно. Более новые версии jQuery (v. 3.2.1) с большей вероятностью потерпят неудачу при обнаружении элемента селектора на основе атрибутов без надлежащего цитирования.
2 

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="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="text" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>
Поделиться
  • 0
    Добро пожаловать в Stack Overflow, sumith deepan, ваш ответ кажется правильным, но не могли бы вы объяснить, что делает ваш код и почему?
2

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

$("#tcol1").hide();
Поделиться
  • 4
    Соответствует только одному элементу
  • 2
    Извини за это. Просто сделай то, что сказал Бен С.
Показать ещё 2 комментария
0

Чтобы скрыть все td с именем "tcol1" 

$('td[name=tcol1]').hide()
Поделиться
-2 
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var a= $("td[name=tcol3]").html();
    alert(a);

});

</script>


<table border="3">
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2tcol1</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol2" class="bold"> data2tcol2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol3" class="bold"> data2tcol3</td>
</tr>
</table>

Это код, который может быть полезен.

Поделиться
  • 2
    Какое значение этот ответ добавляет, что другие ответы еще не предоставлены?
  • 4
    это ленивый обман уже принятого ответа.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню