使用Jquery查找父div的id



jquery each (6)

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

請記住,如果您將答案放在客戶端代碼中,那麼他們可以看到它:)最好的方法是驗證服務器端,但對於範圍有限的應用程序,這可能不成問題。

https://ffff65535.com

我有這樣的一些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的ID。 在現實生活中有多個部分看起來像這樣。

  1. 如何找到父母按鈕的div的ID。

  2. 在按鈕代碼中存儲答案的語義方式是什麼? 我想盡可能地讓這個非程序員複製和粘貼而不會破壞事情!


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

不太確定你的驗證和反饋如何工作,但你明白了。


http://jsfiddle.net/qVGwh/6/選中此項

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

你可以在父div上使用事件委託 。 或者使用closest方法來查找按鈕的父級。

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

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

要獲得父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文檔,特別是選擇器和遍歷:


這可以通過以下方式輕鬆完成:

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

您將它附加到表中的任何對象,它將返回該表的ID。





semantics