Блог

Главная - Вопросы по программированию - Поиск дочернего элемента из родительского элемента, на который нажат элемент

Поиск дочернего элемента из родительского элемента, на который нажат элемент

#javascript #jquery #parent-child #getelementbyid

#javascript #jquery #родитель-потомок #getelementbyid

Вопрос:

В настоящее время я создаю таблицу событий, в которой будет кнопка «поделиться». Как только пользователь нажимает на кнопку «Поделиться», я хочу найти текстовое значение из этой конкретной таблицы и сохранить их в переменной, чтобы я мог использовать их на своем следующем шаге. В основном, когда я нажимаю кнопку «Поделиться», я хочу найти родительский элемент, который оборачивает конкретную таблицу, а затем найти текстовые значения из каждой конкретной ячейки и сохранить их в переменной. В моем JSFiddle у меня есть настройка для отображения результатов в поле результатов. http://jsfiddle.net/Ak84L/5 

 $("#shareButt").click(function(){ 

 var date = $(this).parent('.even_table').find('date').text();

 $(".resultbox").text("date" date);

});

Ответ №1:

Сначала измените shareButt и date на значения class атрибута вместо id , потому что идентификаторы должны быть уникальными.

И используйте этот код:

 $(".shareButt").click(function () {
    var date = $(this).closest('.event_table').find('.date').text();
    $(".resultbox").text("date"   date);
});

ДЕМОНСТРАЦИЯ

Комментарии:

1. И исправьте even_table опечатку, чтобы она была event_table .

2. @Scimonster да!, задавался вопросом, почему это не сработало, и удалил демо.. Теперь его обратно.. В любом случае спасибо

Ответ №2:

Во-первых, НЕ используйте тот же идентификатор. Используйте class вместо этого. Идите этим путем:

js

 $(".shareButt").click(function(){    
     var date = $(this).parents(".event_table").find(".date").text();    
     $(".resultbox").text("date" date);

});

скрипка

Ответ №3:

было бы намного проще добавить пользовательский тег данных к элементу, чем возиться с вычурными вызовами jquery.

Если это достаточно хорошо для основных веб-фреймворков, таких как angular.js , jade , bootstrap и т.д. почему многие люди продолжают пытаться изобретать велосипед, чтобы создать самое сложное решение.

ПРИМЕР JS FIDDLE

HTML 

 <div class="shareButt" date-data="12.5.2014">SHARE</div></td>

jQuery

 $(".shareButt").click(function(){    
     $('.resultbox').text('date'   $(this).attr('date-data'));
});