Как выбрать элемент по имени с помощью jQuery?
есть столбец таблицы, который я пытаюсь развернуть и скрыть:
jQuery, кажется, скрывает td
элементы, когда я выбираю его по класс но не элемент имя.
например, почему:
$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work
обратите внимание на HTML ниже, второй столбец имеет то же имя для всех строк. Как я могу создать эту коллекцию, используя ?
<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>
15 ответов
можно использовать атрибут селектор:
$('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'
любой атрибут может быть выбран с помощью [attribute_name=value]
путь.
Смотрите образец здесь:
var value = $("[name='nameofobject']");
если у вас есть что-то вроде:
<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">
вы можете получить массив элементов по имени старомодным способом и передать этот массив в 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", должно быть для checkbox или радио-входами.
или вы можете просто добавить другой класс к элементам для выбора.(Это то, что я бы сделал)
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>
вы можете получить значение имени из поля ввода, используя элемент 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>
рамки обычно использую имена кронштейн в таких формах, как:
<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]\"]")
вы можете получить элемент в JQuery, используя его атрибут ID следующим образом:
$("#tcol1").hide();
вы можете использовать любой атрибут в качестве селектора с [attribute_name=value]
.
$('td[name=tcol1]').hide();
лично я в прошлом дал им общий идентификатор класса и использовал его для их выбора. Это может быть не идеально, поскольку у них есть класс, который может не существовать, но это делает выбор намного проще. Просто убедитесь,что вы уникальны в своих классах.
т. е. для примера выше я бы использовал ваш выбор по классам. Еще лучше было бы изменить имя класса с полужирного на "tcol1", чтобы вы не получили случайных включений в результаты jQuery. Если полужирный на самом деле относится к классу CSS, вы всегда можете указать оба в свойстве class - т. е. 'class="tcol1 bold"'.
В общем, если вы не можете выбрать по имени, используйте сложный селектор jQuery и принимайте любые связанные хиты производительности или используйте селекторы классов.
вы всегда можете ограничить область jQuery, включив имя таблицы, т. е. $('#tableID > .жирный')
это должно ограничить 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);
}
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>
<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>
Это код, который может быть полезным.