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

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

<div id="1">
    <p>
        Volume = <input type="text" />
        <button rel="3.93e-6" class="1" type="button">Check answer</button>
    </p>
    <div></div>
</div>

и некоторые 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" (я знаю, что числовые классы недействительны, но это WIP!), Чтобы я мог определить buttonNo на основе id родительского div. В реальной жизни есть несколько таких разделов.

1. Как мне найти идентификатор div, являющегося родительским элементом кнопки.

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

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

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

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

1.

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

2.

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

<div>
    Volume = <input type="text" />
    <button type="button">Check answer</button>
    <span style="display: hidden">3.93e-6&lt;/span>
    <div></div>
</div>

А затем используйте код 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);
});

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

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

Вам следует взглянуть на документацию jQuery, особенно на селекторы и обход:

• http://docs.jquery.com/
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Traversing

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 на кнопке - лучший способ семантически определить «это ответ» в вашем коде. Я бы порекомендовал что-то в этом роде:

<p id="question1">
    <label for="input1">Volume =</label> 
    <input type="text" name="userInput1" id="userInput1" />
    <button type="button">Check answer</button>
    <input type="hidden" id="answer1" name="answer1" value="3.93e-6" />
</p>

и

$("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 () и closest () кажется немного медленнее, чем:

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