Поиск идентификатора родительского 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 на основе идентификатора родительского div. В реальной жизни несколько разделов выглядят так.

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

Ответ 1

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

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

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

Ответ 2

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

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

<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);
});

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

Ответ 3

Попробуйте следующее:

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

Ответ 4

$(this).parents('div').attr('id');

Ответ 5

Чтобы получить идентификатор родительского 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
$ (селектор).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, в частности, на селектора и перемещение:

Ответ 6

http://jsfiddle.net/qVGwh/6/ Проверьте это

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

Ответ 7

Это легко сделать, если:

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

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

Ответ 8

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);
});

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

Ответ 9

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

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