使用JQuery查找父级div的id

Question

使用JQuery查找父级div的id

100

我有这样的一些 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确定buttonNo。实际情况下有多个看起来像这样的部分。

如何找到包含按钮的父div的id。
存储按钮代码中答案的更语义化的方式是什么。我想尽可能地为非程序员复制和粘贴而不破坏东西提供便利！

- Rich Bradshaw

9个回答

47

1.

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

请记住，如果您在客户端代码中放置答案，则客户端可以看到它 :) 最好的方法是在服务器端验证，但对于范围有限的应用程序，这可能不是问题。

- Robert Grant

我不知道如何在这个编辑器中格式化HTML，但这似乎是一个比Pim的('div:eq(0)')更简单的方法来获取父元素；除非我在这里错过了什么微妙之处，否则HTML元素都有一个直接的父元素，你只需要用parent()就可以得到它。 - Rob Grant

parent确实会返回最近的父级元素，但是如果他决定想在Div内部添加一个fieldset或其他东西来包围这个问题，会发生什么呢？ - Pim Jager

实际上，在他自己的示例中，这将返回<p>。 - Pim Jager

确实，如果添加更多的div，则'div：eq（0）'可能是错误的。改变结构，改变解析它的代码 :)是的，我将示例简化为最小的HTML，以便进行示例; 它应该调用两次父级。 - Rob Grant

由于某种原因，当我使用parent()时，我无法访问attr(id)，因此在执行了一些父选择器后，我不得不像这样包装结果$(parent[0]).attr('id')。 - Piotr Kula

使用parent('div')代替parent()可以得到正确的结果。 - komal

11

试一下这个：

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

- Buu Nguyen

10

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

- Ashish Sajwan

7

获取父级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) 将选择与 selector 匹配的所有元素的父级元素，且这些父级元素要匹配 parent selector。 http://docs.jquery.com/Traversing/parents#expr 因此：$(selector).parents('div:eq(0)'); 将匹配与 selector 相匹配的元素的第一个父级 div。

你应该查看 jQuery 文档，特别是选择器和遍历：

- Pim Jager

简单易懂！为什么要用div:eq(0)？这是什么意思？ - Rich Bradshaw

如果这些内容至少被一个div包裹，我认为'div:eq(0)'会出错，因为您正在对DOM进行绝对遍历而不是相对遍历。如果第一个元素是“最近”的父元素，那么这将是可以的，但是这表明情况并非如此：http://tinyurl.com/bbegow - Rob Grant

1

（因此我使用parent()而不是......） - Rob Grant

6

请点击此链接查看检查一下

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

- Jerin K Alexander

5

这可以轻松地完成，只需执行以下操作：

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

您可以将其附加到表中的任何对象上，它会返回该表的ID。

- Hamid

3

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

我不太确定您的验证和反馈是如何工作的，但您可以理解这个想法。

- Parrots

0

find()和closest()似乎比以下代码略慢：

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

- Cris

$(this).parent().parent().attr("id");? - Alejandro Iván

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark · Accepted Answer

你可以在父级 div 上使用事件委托（event delegation）。或者使用 closest 方法来查找按钮的父元素。

这两种方法中最简单的可能是 closest。

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