Jak Mogę wybrać element po nazwie za pomocą jQuery?
Mieć kolumnę tabeli, którą próbuję rozwinąć i ukryć:
JQuery wydaje się ukrywać td elementy, gdy zaznaczam je przezklasa , ale nie przez nazwęelementu .
Na przykład, dlaczego:
$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work
Zwróć uwagę na poniższy kod HTML, Druga kolumna ma tę samą nazwę dla wszystkich wierszy. Jak mogę utworzyć tę kolekcję używając atrybutu 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>
15 answers
Możesz użyć selektora atrybutu :
$('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'
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-07 23:39:24
Dowolny atrybut można wybrać za pomocą metody [attribute_name=value].
Zobacz przykład tutaj :
var value = $("[name='nameofobject']");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-23 18:57:43
Jeśli masz coś takiego:
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">
Możesz przeczytać wszystko tak:
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});
Fragment:
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">Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-07 20:02:31
Możesz pobrać tablicę elementów Po nazwie w staromodny sposób i przekazać ją do 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>Uwaga: jedynym powodem do używania atrybutu "name" powinno być pole wyboru lub wejście radiowe.
Lub możesz po prostu dodać inną klasę do elementów do wyboru.(This is what I would do)
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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-07 19:52:57
Możesz uzyskać wartość name Z pola wejściowego używając elementu name w jQuery przez:
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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-07 20:08:22
Frameworki zwykle używają nazw nawiasów w formach, takich jak:
<input name=user[first_name] />
Mogą być dostępne przez:
// 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]\"]")
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-16 16:32:17
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-25 21:22:01
Oto proste rozwiązanie: $('td[name=tcol1]')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-27 19:26:37
Możesz uzyskać element w JQuery używając jego atrybutu ID w następujący sposób:
$("#tcol1").hide();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-10 01:09:39
Możesz użyć dowolnego atrybutu jako selektora z [attribute_name=value].
$('td[name=tcol1]').hide();
Osobiście, to co zrobiłem w przeszłości, to nadanie im wspólnego identyfikatora klasy i użycie go do ich wybrania. Może nie jest to idealne rozwiązanie, ponieważ mają określoną klasę, która może nie istnieć, ale sprawia, że wybór jest o wiele łatwiejszy. Po prostu upewnij się, że jesteś wyjątkowy w swoich klasach.
Tzn. dla powyższego przykładu użyłbym twojego wyboru według klasy. Jeszcze lepiej byłoby zmienić nazwę klasy z pogrubionej na 'tcol1' , aby nie dostać żadnych przypadkowych inkluzji do wyników jQuery. Jeśli pogrubienie w rzeczywistości odnoszą się do klasy CSS, zawsze można określić zarówno we właściwości class - tj. ' class="tcol1 bold"".
Podsumowując, jeśli nie możesz wybrać po nazwie, użyj skomplikowanego selektora jQuery i zaakceptuj powiązane trafienie wydajności lub użyj selektorów klas.
Możesz zawsze ograniczyć zakres jQuery, włączając nazwę tabeli, np. $('#tableID > .pogrubienie")
To powinno ograniczyć jQuery do przeszukiwania "świata".
Its można jeszcze zaklasyfikować jako skomplikowane selektor, ale szybko ogranicza wszelkie wyszukiwanie do wewnątrz tabeli z ID '# tableID', więc utrzymuje przetwarzanie do minimum.
Alternatywą dla tego, jeśli szukasz więcej niż 1 elementu w #table1, byłoby odszukanie tego osobno, a następnie przekazanie go do jQuery, ponieważ ogranicza to zakres, ale oszczędza trochę przetwarzania, aby sprawdzić go za każdym razem.
var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
var row1 = rows[0];
var firstRowCells = $('td',row1);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-27 18:01:38
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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-12 06:41:33
Zapomniałeś drugiego zestawu cudzysłowów, co sprawia, że przyjęta odpowiedź jest niepoprawna:
$('td[name="tcol1"]')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-20 19:27:54
Aby ukryć wszystkie td o nazwie "tcol1"
$('td[name=tcol1]').hide()
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-07 09:49:40
<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>
To jest kod, który może być pomocny.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-29 20:48:17