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

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

1086 голосов
/ 10 июля 2009

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

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>

Ответы [ 14 ]

1968 голосов
/ 10 июля 2009

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

$('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'
192 голосов
/ 22 сентября 2013

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

var value = $("[name='nameofobject']");
55 голосов
/ 09 июля 2014

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

<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">
24 голосов
/ 11 июля 2009

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

Вы можете получить значение имени из поля ввода, используя элемент 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>
15 голосов
/ 16 октября 2015

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

<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 голосов
/ 25 марта 2015

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

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

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

5 голосов
/ 27 апреля 2016

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

3 голосов
/ 20 ноября 2017

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

$('td[name="tcol1"]')
3 голосов
/ 31 марта 2016

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

$('td[name=tcol1]').hide();
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...