使用Jquery查找父div的ID


99

我有一些这样的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. 将答案存储在按钮代码中的方式会更语义化。我想让非程序员尽可能地做到这一点,而又不会破坏东西!

Answers:


212

您可以在父div上使用事件委托。或使用最接近的方法查找按钮的父级。

两者中最简单的可能是最接近的。

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

6
我真的很喜欢最接近的,因为您可以执行.closest(“ div.foo”)之类的代码,并且代码不依赖于该结构。
Mark

2
我打算做一个递归函数....然后我知道jquery已经有东西了...就我而言,我使用$(“#” + id).closest(“ div.form-group”)查找具有表单组类的父div。
cabaji99

47

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

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


我不知道如何在此编辑器中格式化HTML,但这似乎是一种比Pim('div:eq(0)')东西更简单的获取父对象的方法。除非我在这里没有什么细微之处,否则html元素都具有一个直接父级,您可以通过parent()获得。
罗布·格兰特

父母确实会返回最接近的父母,但是,如果他决定要在问题周围但在Div内添加字段集或其他内容,会发生什么情况。
Pim Jager

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

确实,如果添加更多的div,那么“ div:eq(0)”可能是错误的。更改结构,更改解析它的代码:)是的,我将示例简化为示例所需的最小html;它应该给父母打电话两次。
罗布·格兰特

由于某些原因,当我使用parent()时,我无法访问attr(id),$(parent[0]).attr('id')在我喜欢了几个父选择器后,不得不像这样包装结果。
Piotr Kula 2014年

11

试试这个:

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


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)将选择与选择器匹配且与父选择器匹配的元素的所有父项。http://docs.jquery.com/Traversing/parents#expr
因此:$(selector).parents('div:eq(0)'); 将匹配选择器匹配的元素的第一个父div。

您应该看一下jQuery文档,特别是选择器和遍历:


简单又容易!为什么选择div:eq(0)?那是什么意思?
Rich Bradshaw

我认为如果将div:eq(0)全部包裹在至少一个div中,那将是错误的,因为您正在对DOM进行绝对遍历,而不是相对遍历。如果第一个元素是“最接近的”父元素,那会很好,但是这表明不是这样:tinyurl.com/bbegow
Rob Grant

1
(因此,我改为使用parent())
罗布·格兰特


5

通过执行以下操作可以轻松完成此操作:

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

您将此附加到表内的任何对象上,它将返回您该表的ID。


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

不太确定您的验证和反馈如何工作,但是您明白了。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.