<input id="input_1" …> <input id="input_2" …> .... "> <input id="input_1" …> <input id="input_2" …> .... "> <input id="input_1" …> <input id="input_2" …> .... " />

Hoe weet ik dat mijn selector correct is in jQuery

Ik heb het volgende stukje HTML-code:

<div class="myclass" id ="class1">
  
  1. <input id="input_1" …>
  2. <input id="input_2" …>
  3. ....
  4. <input id="input_n" …>
</div>

Nu wil ik de klasse van sommige acronym-tags wijzigen, ik heb de id van een acronym-tag, dus ik heb dit geprobeerd:

$('acronym#'+id).removeClass('classabc');
$('acronym#'+id).addClass('newclass');

Het werkte niet, dus ik probeerde het:

$('div.myclass ol acronym#'+id).removeClass('classabc');
$('div.myclass ol acronym#'+id).addClass('newclass');

Maar het werkt nog steeds niet. Ik probeerde binnen de code een waarschuwing, de waarschuwing werkt. Ik denk dat mijn selector niet goed is. Dus ik vraag is er hoe dan ook om de juiste selector te krijgen? Of hoe weet ik dat mijn selector correct is?

2
Weet u zeker dat u 'acronym # _' + id niet wilt?
toegevoegd de auteur kojiro, de bron
weet je zeker dat de waarde van "id" bijvoorbeeld "input_2" is ??
toegevoegd de auteur MCSI, de bron
Ter informatie, ID's zijn uniek, dus het is niet nodig om de tagnaam ervoor op te nemen. Dat voegt alleen een extra (onnodige) controle toe.
toegevoegd de auteur Wiseguy, de bron
[jsFiddle] [1] is je vriend. gebruik het om dingen als deze te testen. [1]: jsfiddle.net
toegevoegd de auteur DwB, de bron
Wat is de waarde van id en is de code actief als de DOM gereed is?
toegevoegd de auteur RightSaidFred, de bron

4 antwoord

Het is niet gepast om dezelfde id gedeclareerd te hebben voor twee elementen.

Verwijder de id uit acronym en gebruik vervolgens het volgende javascript.

<input id="input_1">

Where var id = "input_1";

$('#'+ id).siblings('acronym').removeClass('classabc');

The Fiddle

Here is a w3schools link to learning CSS selectors. http://www.w3schools.com/cssref/css_selectors.asp

5
toegevoegd
Maar het gedeelte acronym is weliswaar overbodig, maar het is niet ongeldig, dus het verwijderen ervan zal de uitkomst van de code niet veranderen.
toegevoegd de auteur RightSaidFred, de bron
Ik zie, ik heb niet gemerkt dat het OP dubbele ID's had. Moeilijk te zeggen wat '#' + id zal doen. Waarschijnlijk de eerste die wordt gevonden, maar u kunt nooit zeker zijn met ongeldige markeringen.
toegevoegd de auteur RightSaidFred, de bron
Ik bedoelde alleen dat aangezien $ ('#' + id) document.getElementById gebruikt, we kunnen aannemen dat het het eerste duplicaat zal pakken dat het vindt, maar het zou niet noodzakelijk gegarandeerd.
toegevoegd de auteur RightSaidFred, de bron
Ik heb een verwijzing toegevoegd naar acronym in de bewerkte JS.
toegevoegd de auteur Scruffy The Janitor, de bron
Ik neem de aanname dat de id die hij doorgeeft in '#' + id een lokale variabele is van de id die hij wil selecteren.
toegevoegd de auteur Scruffy The Janitor, de bron

Het belangrijkste probleem hier: het id-kenmerk MOET uniek zijn voor het document. U hebt verschillende keren hetzelfde id-attribuut gebruikt en dit leidt tot geen (of onvoorspelbare) resultaten met een id-selector!

2
toegevoegd
Bevestigd, althans in IE. Onthoud dat jQuery een helper is en geen middel om DOM-regels te handhaven.
toegevoegd de auteur villecoder, de bron

De basisselector waarnaar u zoekt, moet er ongeveer zo uitzien (aangezien u dubbele id's heeft):

$('acronym[id='input_n'])

dus u moet de afsluitende offertes opnemen:

$("acronym[id='input_" + n + "']")

Note: Since there are duplicate ids, this answer isn't using the more common $('#input_n') selector.

2
toegevoegd
Dat klopt niet. Uw selector zou zoeken naar
toegevoegd de auteur RightSaidFred, de bron
Het antwoord is origineel bewerkt, maar waarom een ​​ id filter gebruiken in plaats van de id-selector # ?
toegevoegd de auteur RightSaidFred, de bron
Ik zie, er worden dubbele ID's gebruikt in de vraag. +1 Hoewel een opmerking over het gebruik van dupes waarschijnlijk in orde is. ;)
toegevoegd de auteur RightSaidFred, de bron
@RightSaidFred, je hebt gelijk - ik heb te snel getypt en ingediend voordat ik klaar was met bewerken.
toegevoegd de auteur JW8, de bron
@RightSaidFred, goed idee - ik zal een kleine notitie toevoegen.
toegevoegd de auteur JW8, de bron

Idealiter zouden de id's op de pagina uniek moeten zijn voor elk dom element. Als je bedenkt dat als je een element op basis van Id wilt vinden, je gewoon de id-selector kunt gebruiken. Probeer dit

$('#'+id).removeClass('classabc');
$('#'+id).addClass('newclass');
1
toegevoegd