Mam problem z duplikatem ID. Jestem również świadomy, że jest to bardzo zła praktyka posiadania elementów z tym samym identyfikatorem, ale w tym przypadku, będę musiał zmienić ogromną część aplikacji, aby zmienić identyfikator, więc mogą być unikalne.

Mam problem z przełączeniem klas na elemencie w jQuery. Moja struktura jest poniżej:

<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
    <span></span>
    <div id="wlHeader-7050"></div>
    <div id="wlBody-7050">
        <ul>
            <li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
                <div id="wlHeader-7050"></div>
            </li>
            <li id="wl-7051"></li>
            <li id="wl-7052"></li>
            <li id="wl-7053"></li>              
        </ul>
    </div>
</li>
</ul>

Potrzebuję funkcji, w której kliknięcie pierwszej instancji ID WL-7050, elementy dziecka otrzymują nową klasę. Jeśli wybiorę drugi (pojedynczy) element z ID WL-7050, tylko że jeden element ma do niego nowe klasy.

Próbowałem używać jQuery wraz z nim: First &: EQ (0) atrybuty, ale niestety nie ma szczęścia.

Mam zajęcia przypisane do każdego elementu LI i jego elementy dziecka, ale za każdym razem, gdy biegam $ ('# WL-7050: EQ (0)'), zwraca obie i rodzic Element WL-7050 Element został użyty.

Jestem elastyczny z odpowiedziami JavaScript i Jquery.

0
Robert McAteer 4 czerwiec 2018, 15:34

4 odpowiedzi

Najlepsza odpowiedź

Byłem tam wcześniej: musiałem poradzić sobie z aplikacjami, które robią dziwne rzeczy, gdzie zmieniając ich, aby były "poprawne", powoduje więcej żalu niż tylko radzenie sobie z nim i poruszając się. Znasz duplikaty identyfikatory, są złe, wiem, że duplikaty identyfikatory są złe; Sortujmy problem. (Tak, są złe. Tak, nie powinni tam być. Niestety tam są.)

Możesz traktować identyfikatory, takie jak każdy inny atrybut na elemencie: są atrybutami, choć specjalnymi. Kod taki jak to będzie działać, aby wybrać wszystkie elementy o tym samym ID: $('[id=wl-7050]').

Teraz musimy wiązać do nich wydarzenie kliknięcia. Zrobimy to samo, co zawsze robimy:

var lis = $('[id=wl-7050]').click(function(e){
    console.log(this);
});

Oto sztuczka i tak się stanie, nawet jeśli te elementy miały różne identyfikatory: Po kliknięciu dziecka Li, kliknięcie wydarzenia będzie bańka do rodzica. Będziemy musieli wyłączyć propagację zdarzeń, więc dwukrotnie nie wywołujemy zdarzenia kliknięć:

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    console.log(this);
});

Teraz jesteśmy w biznesie i mogę pracować, aby dowiedzieć się, jaki typ LI pracujemy z: najwyższym poziomem lub dzieckiem.

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    if ($(this).children('li').length > 0) {
        // Top-level LI
    }
    else {
        // Child-level LI
    }
});

To powinno cię dostać, gdzie musisz być. Zgadzam się, że nigdy więcej nie mówisz o tych duplikatach.

1
ajm 4 czerwiec 2018, 12:56

Nie musisz dodawać identyfikatora do każdego li, który byłby zbyt skomplikowany. Po prostu użyj klas wewnątrz swoich przedmiotów i zadzwoń do nich w ten sposób:

$("#group li").on("click", function(){
	alert($(this).data("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
    <span></span>
    <div id="header"></div>
    <div id="body">
        <ul id="group">
            <li data-id="1"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>    
            <li data-id="2"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>    
            <li data-id="3"> <!-- This is the single element version of the data group header as above -->
                <div class="wlHeader"></div>
            </li>          
        </ul>
    </div>
</li>
</ul>
0
Sinan Samet 4 czerwiec 2018, 12:46

Jeśli nie możesz zmienić identyfikatorów, możesz spróbować dodać inną nazwę klasy do obu elementów:

<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
    <ul>
        <li id="wl-7050" class="wl-7050-single">
            <div id="wlHeader-7050"></div>
        </li>
        <li id="wl-7051"></li>
        <li id="wl-7052"></li>
        <li id="wl-7053"></li>              
    </ul>
</div>
</li>
</ul>

Potem zapytasz z:

$("#wl-7050.wl-7050-main");
$("#wl-7050.wl-7050-single");
1
abgita 4 czerwiec 2018, 12:50

Atrybut ID określa unikalny identyfikator elementu HTML (wartość musi być unikalna w dokumencie HTML).

Nie możesz mieć dwóch WL-7050. Użyj klas. Następnie do pracy "Dodaj nową klasę na kliknięciu" To tylko trudny kod. Jeśli potrzebujesz pomocy, mogę edytować moją odpowiedź. Ale jest tylko kodowany. Identyfikatory HTML to koncepcja

2
Cristian 4 czerwiec 2018, 12:46