使用jQuery查找父div的id

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (153)

我有一些类似的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);
});

我真正想要的是,如果我不需要在按钮上有类=“1”(我知道数字类无效,但这是一个WIP!),那么我就可以根据父div的id来确定按钮No。有多个问题如下所示。

  1. 我要怎么找到这个子元素的id。
  2. 在按钮代码中存储答案的一个更有语义的方法是什么。我想使这尽可能地简单,一个非程序员复制和粘贴,而不破坏的东西!
提问于
用户回答回答于

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

两者中最容易的可能是最接近的。

var id = $("button").closest("div").prop("id");
用户回答回答于

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

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

扫码关注云+社区

领取腾讯云代金券