jquery - 使用 Jquery 查找父 div 的 id

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！），所以我可以根据父 div 的 id。在现实生活中，有多个部分看起来像这样。

1. 如何找到作为按钮的 div 的 id。

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 的 id：

$(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(parentsSelector) 将选择与父选择器匹配的选择器匹配的所有父元素。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

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

您将它附加到表内的任何对象上，它将返回该表的 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() 和最接近的() 似乎比：

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