Поиск идентификатора родительского div с помощью JQuery

У меня есть несколько html:

Volume =

и некоторые JS:

 $("button").click(function () { var buttonNo = $(this).attr('class'); var correct = Number($(this).attr('rel')); validate (Number($("#"+buttonNo+" input").val()),correct); $("#"+buttonNo+" div").html(feedback); }); 

Мне бы очень хотелось, если бы у меня не было classа = «1» на кнопке (я знаю, что числовые classы недопустимы, но это WIP!), Поэтому я мог определить buttonNo на основе id родительского div. В реальной жизни несколько разделов выглядят так.

  1. Как найти идентификатор дочернего элемента div.

  2. Что было бы более семантическим способом хранения ответа в коде кнопки. Я хочу сделать это как можно более надежным, чтобы не программист мог копировать и вставлять, не нарушая ничего!

Вы можете использовать делегирование событий в родительском div. Или используйте ближайший метод, чтобы найти родителя кнопки.

Самый простой из них, вероятно, самый близкий.

 var id = $("button").closest("div").prop("id"); 

1.

 $(this).parent().attr("id"); 

2.

Должно быть много способов! Можно было бы скрыть элемент, содержащий ответ, например

 
Volume = 3.93e-6</span>

И тогда у них есть аналогичный код jQuery, чтобы получить следующее:

 $("button").click(function () { var correct = Number($(this).parent().children("span").text()); validate ($(this).siblings("input").val(),correct); $(this).siblings("div").html(feedback); }); 

имейте в виду, что если вы поместите ответ в код клиента, тогда они смогут увидеть его. Лучший способ сделать это – проверить его на стороне сервера, но для приложения с ограниченной областью это может и не быть проблемой.

Попробуй это:

 $("button").click(function () { $(this).parents("div:first").html(...); }); 
 $(this).parents('div').attr('id'); 

Чтобы получить идентификатор родительского div:

 $(buttonSelector).parents('div:eq(0)').attr('id'); 

Кроме того, вы можете реорганизовать свой код совсем немного:

 $('button').click( function() { var correct = Number($(this).attr('rel')); validate(Number($(this).siblings('input').val()), correct); $(this).parents('div:eq(0)').html(feedback); }); 

Теперь нет необходимости в кнопочном classе

объяснение
eq (0) означает, что вы выберете один элемент из объекта jQuery, в этом случае элемент 0, таким образом, первый элемент. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (siblingsSelector) выберет всех братьев и сестер (элементов с одним и тем же родителем), которые соответствуют сиблингамSelector http://docs.jquery.com/Traversing/siblings#expr
$ (selector) .parents (parentsSelector) выберет всех родителей элементов, соответствующих селектору, которые соответствуют родительскому селектору. http://docs.jquery.com/Traversing/parents#expr
Таким образом: $ (selector) .parents (‘div: eq (0)’); будет соответствовать первому родительскому div элементов, соответствующих селектору.

Вы должны взглянуть на документы jQuery, в частности, на селектора и перемещение:

http://jsfiddle.net/qVGwh/6/.

  $("#MadonwebTest").click(function () { var id = $("#MadonwebTest").closest("div").attr("id"); alert(id); }); 

Это можно легко сделать, выполнив следующие действия:

 $(this).closest('table').attr('id'); 

Вы присоединяете это к любому объекту внутри таблицы, и он вернет вам идентификатор этой таблицы.

У JQUery есть метод .parents () для перемещения дерева DOM, с которого вы можете начать.

Если вы заинтересованы в этом более семантично, я не думаю, что использование атрибута REL на кнопке – лучший способ семантически определить «это ответ» в вашем коде. Я бы рекомендовал что-то в этом направлении:

 

а также

 $("button").click(function () { var correctAnswer = $(this).parent().siblings("input[type=hidden]").val(); var userAnswer = $(this).parent().siblings("input[type=text]").val(); validate(userAnswer, correctAnswer); $("#messages").html(feedback); }); 

Не совсем уверен, как работают ваши проверки и отзывы, но вы получаете эту идею.

find () и ближайший () кажется немного медленнее, чем:

 $(this).parent().attr("id"); 
Interesting Posts

Не удается установить Windows 7 на расширенный раздел

Spark 2.0.x выгружает csv-файл из фрейма данных, содержащего один массив строки типа

Как написать сценарий PowerShell, который принимает ввод конвейера?

Как Windows вычисляет процент фрагментации?

Где отключены программы автозапуска? Где-то в реестре?

Прозрачная командная строка в Vista?

Почему AspectJ не компилируется во время работы Spring @Configurable?

Почему объекты Delphi назначаются даже после вызова. Свободно?

Как получить подсветку синтаксиса в TextMate 2

Как я могу безопасно форматировать твердотельный накопитель?

Невозможно десериализовать экземпляр java.util.ArrayList из токена START_OBJECT

Добавить банки в Spark Job – spark-submit

Как открыть консольное приложение с заданным размером окна?

Синхронизировать SelectedItems в списке мулиселек с коллекцией в ViewModel

Как исправить USB-накопитель Memorex USB 8GB, который показывает 0 B?

Давайте будем гением компьютера.