Wyszukiwanie wiersza nadrzędnego wprowadzania tekstu w formularzu

Question

Próbuję użyć atrybutów danych w tabeli HTML do przechowywania danych dotyczących elementu, który będzie później używany w wywołaniu ajax, ale mam problem z zaznaczeniem jQuery, gdy Próbuję odzyskać dane.

to działa:

var listItemId = $(this).parent().parent().attr('data-id'); 

Jednak selektor .parent().parent() jest zbyt kruchy - it'll złamać jeśli kiedykolwiek zmienić swoją strukturę HTML.

To, co chciałbym zrobić, ale jest zwrócenie niezdefiniowane:

var listItemId = $(this).parent('.list-item').attr('data-id'); 

Moje HTML wygląda następująco:

<tr class="list-item" data-id="1"> 
    <td> 
    <input value="Some text entered by the user" type="text" > 
    </td> 
</tr> 

Czego mi brakuje?

Answer 1

wewnętrznie, jquery używa .closest dla tego rodzaju rzeczy.

var listItemId = $(this).closest('tr').attr('data-id'); 

ponadto jeśli zagnieżdżone tabele (które nigdy nie widziałem, ale nigdy nie wiadomo), trzeba wybrać pierwszą „tr” zbyt. (Jest to bardziej przydatne przy szukaniu div niż w wierszach). Jednak do unifikacji kodu nigdy nie używam rodziców, kiedy potrzebuję najbliższego. W ten sposób, nazwy funkcji implikuje to znaczy dokładnie (najbliżej rodzic), natomiast .parents() pozostawia więcej miejsca do interpretacji, a tym samym zmniejszenia czytelności kodu (imo)

wydajność mądry, są równoważne (sprawdź this jsperf)

wreszcie, można rozważyć czystego javasrcipt approache tOO: parentNode (Miles szybciej niż cokolwiek innego, jeśli naprawdę potrzebujesz prędkości)

w przypadku:

var listItemId = $(this.parentNode.parentNode).attr('data-id'); 

lub

var listItemId = this.parentNode.parentNode.attributes['data-id'].value; 

Uwaga: czyste metody javascript wymagają poprawnego html do pracy, w przeciwieństwie do tego, którego dotyczy pytanie (zamknij swój tag wejściowy i dodaj tabelę).

here is a little fiddle

Answer 2

spróbować

var listItemId = $(this).parents('.list-item').attr('data-id'); 

parents() idzie w górę w drzewie aż pasuje selektora

Answer 3

Proponuję:

var listItemId = $(this).parents('tr').data('id'); 

Selektor klasy jest najwolniejszy ze wszystkich selektorów jQuery i należy unikać, chyba że nie ma innego sposobu na uzyskanie potrzebnych informacji.

UPDATE

Naprawiłem składnię skorzystać z metody .data() poprawnie. W ten sposób działa tylko w wersji 1.4.3 lub nowszej.

Answer 4

$(this).closest('tr').attr('data-id'); 

To będzie najlepsze rozwiązanie dla Twojego problemu. Kod nie będzie zależał od twojej struktury html, chyba że wprowadzisz nowy tag pomiędzy