Znam pytania o podobnych tytułach, zostały wcześniej zadawane i widziałem odpowiedzi.

Mam element ul w HTML:

<ul class="collection with-header"></ul>

W tym elemencie Li są dodawane dynamicznie przez JavaScript:

$('.collection').append('<li class="collection-item">'+'Hello'+'</li>');

Teraz, dla każdego elementu li_ / strong> chcę dodać numer do atrybutu klasy, aby zidentyfikować każdy element li_ / strong>, aby można było przypisać inny identyfikator Atrybuty dla nich. Dla tego, że napisałem:

var j = 1;
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

Kiedy próbuję pobrać ID z li Elements by Hover Event:

$('.collection-item').hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );

niezdefiniowany jest drukowany w konsoli.

Co jest nie tak w tym wdrożeniu?

Edytuj: Wartość listy [I] .USERNAME jest w porządku, jego wartość przychodzi z innego pliku i nie powoduje żadnych problemów.

3
ssharma 24 czerwiec 2017, 11:11

4 odpowiedzi

Najlepsza odpowiedź

O ile widzę, twoje umieszczenie I W ramach tego ciągów wynika, że jestem poza atrybutem HTML ClassName, infact nie wewnątrz żadnego atrybutu HTML w ogóle. Twój kod:

$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');

Spowodowałoby to ostatnie znaczniki:

<li class = "collection-item"0>Hello</li>
<li class = "collection-item"1>Hello</li>

Zero nie ma znaczenia HTML i nie ma miejsca.

Komentarz @ Sphinx jest prawidłową odpowiedzią, ale jest to "nie jest zwolniony", ponieważ jego kod powoduje, że każdy element listy posiadający unikalną nazwę klasy z jego numerem na końcu:

<li class = ".collection-item0">Hello</li>
<li class = ".collection-item1">Hello</li>

Po dodaniu akcji na Hover wybierzesz te elementy według klasy ".Collection-Element", a nie wyjątkową klasę.

Twoje rozwiązanie wyglądałoby tak:

$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>');
$('.collection-item.'+j).attr("id",list[i].username);

Wraz z tym, w końcowej znaczniku, każda pozycja listy będzie miała dwie klasy - klasa wspólna "kolekcja" i wartość numeryczna, taka:

<li class="collection-item 0"></li>
<li class="collection-item 1"></li>

Teraz możesz wybrać każdą pozycję listy (w tej przykładowej liście pozycji 4) przez dwie klasy za pomocą selektora $(".collection-item.4"), jak również zastosuj akcję do wszystkich elementów kolekcji za pomocą selektora $(".collection-item").

Uważam, że ten kod nieco brzydki wygląda i nie jestem pewien, czy będę zadowolony z tego sam w kategoriach struktury, jeśli był mój, ale tutaj jest JSFiddle jako dowód koncepcji: https://jsfiddle.net/0wqeouxo/ (kliknij każdą pozycję listy i powiadomi swój identyfikator)

Myślę, że możesz uzyskać więcej przebiegu funkcjonalności JQUERY w tej pętli, a nie definiowanie zajęć inline.

3
slackOverflow 24 czerwiec 2017, 09:03

Jest to dynamicznie dołącza element. Więc możesz użyć on(). i zmień taką selektor

$(document).on('hover' ,'li[class^="collection-item"]',function(){
        var idd = $(this).attr('id');
        console.log(idd);
        });
1
prasanth 24 czerwiec 2017, 08:21

Jak działa asynchronicznie, gdy próbujesz ustawić identyfikator, element może być jeszcze w domu. Możesz ustawić identyfikator przed dołączeniem elementu, na przykład:

$('<li class="collection-item '+j+'">'+ 'Hello'+'</li>')
  .attr("id",list[i].username)
  .appendTo('.collection');
2
itacode 24 czerwiec 2017, 10:08

Użyj tego zamiast tego

var j = 1;
$('.collection').append('<li class="collection-item'+j+'">'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

W Twoim kodzie znajduje się błąd składniowy, użyj powyższego kodu.

Na unosi się do pracy, zrób to

$('.collection-item'+j).hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );
3
sphinx 24 czerwiec 2017, 09:15