Поиск идентификатора родительского div с использованием Jquery

Question

У меня есть немного 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. В реальной жизни есть несколько разделов, похожих на это.

1. Как мне найти идентификатор div-элемента для кнопки.

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 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
$ (selector) .siblings (siblingsSelector) выберет всех братьев и сестер (элементы с одинаковым родителем), которые соответствуют siblingsSelector http://docs.jquery.com/Traversing/siblings#expr
$ (селектор) .parents (parentSelector) выберет все родительские элементы элементов, соответствующих селектору, которые соответствуют родительскому селектору. http://docs.jquery.com/Traversing/parents#expr
Таким образом: $ (селектор) .parents ('div: eq (0)'); будет соответствовать первому родительскому div элементов, соответствующих селектору.

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

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

Answer 6

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

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

Answer 7

Это легко сделать, выполнив:

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

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

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

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

Answer 9

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

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