javascript - jqueryで兄弟ではない子の次のインスタンスを見つけますか?

Question

フォームの外側に入力と div コンテナを含むフォームがあり、各入力のヘルプ テキストがあります。

<form>
    <input id="name" />
    <input id="email" />
    <input id="pass" />
</form>
<div class="help-container">
    <p class="help-name"></p>
    <p class="help-email"></p>
    <p class="help-pass"></p>
</div>

.help-container は最初は { display: none; で非表示になっています。} および各子 p.

私が問題を抱えているjQueryは次のとおりです。

$("form").find("input").focus(function(){
    var parent = $(this).attr("id");
    $(this).closest("form").next(".help-container").show();
})

1) これは機能しません。なんで？

$("form").find("input").focus(function(){
    var parent = $(this).attr("id");
    $(this).closest("form").next(".help-container").show();
    $(".help-container").children("p").hide();
    $(".help-container").children("p").find(".help-" + parent).show();
})

2) これは機能しません。なんで？

Answer 1

ここにあなたの問題があります

$("form").find("input").focus(function(){
    var parent = $(this).attr("id");
    $(this).closest("form").next(".help-container").show(); // you show the container
    $(".help-container").children("p").hide(); // hide all p under it - nothing is shown now
    $(".help-container").children("p").find(".help-" + parent).show(); // you're trying to find elements under p with class .help-xxx
})

これに変更する必要があります

$("form input").focus(function(){
    var parent = $(this).attr("id");
    $(".help-container").children("p").hide();    // hide all p's
    $(".help-container").children("p.help-" + parent).show(); // show relevant p - since you want the p with the matching class
});​

http://jsfiddle.net/vjUme/

Answer 2

この行は機能しません：

 $(".help-container").children("p").find(".help-" + parent).show();

要素内で.help-IDを検索しているためp、代わりにこれを試してください。

 $(".help-container").children("p.help-" + parent).show();

Answer 3

JSBIN

$("form").find("input").focus(function(){
    var helper = $(this).attr("id");
    $(this).closest("form").next(".help-container").show();
    $(".help-container").find(".help-"+ helper ).show().siblings('p').hide();
});