在jquery中查找非兄弟孩子的下一个实例?

时间:2012-12-13 20:15:31

标签: javascript jquery show-hide

我有一个表单,其中包含输入和表格之外的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)这不起作用。为什么呢?

3 个答案:

答案 0 :(得分:2)

以下是您的问题

$("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/

答案 1 :(得分:2)

这条线不起作用:

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

因为您正在<{1}}元素中搜索.help-ID ,请尝试以下方法:

p

答案 2 :(得分:2)

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