Jquery外部から要素を見つける方法

Question

私はクリックしようとしている要素の外にある要素を探したいと思います。

＃form-1とslideToggle .business-form-kaufenをクリックする必要があります。 画像の階層を見ることができます。

ありがとうございました！

Answer 1

使用.parent()比較的

$("#form-1").on("click", function(evt) { 
 
    $(this).parent().parent().next().find(".business-form-kaufen").slideToggle(); 
 
});

.business-form-kaufen { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12 text-left"> 
 
    <div id="kaufen-form-submit"> 
 
    <a id="form-1">Unverbindliches ...</a> 
 
    </div> 
 
</div> 
 
<div id="wpcf7-fp09-p448-ol"> 
 
    <div class="screen-reader-response"></div> 
 
    <form> 
 
    <div class="business-form-kaufen"> 
 
     Lorem ipsum dolor sit amet 
 
    </div> 
 
    </form> 
 

 
</div>

それとも、.business-form-kaufenにいくつかのidを追加したり、それだけで、この単一の要素であることを確認するために、あなたのHTMLを編集することができますいずれかの場合このクラスのあなたはもっと簡単にすることができます：

$("#form-1").on("click", function(evt) { 
 
    $(".business-form-kaufen").slideToggle(); 
 
    // $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element 
 
});

.business-form-kaufen { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12 text-left"> 
 
    <div id="kaufen-form-submit"> 
 
    <a id="form-1">Unverbindliches ...</a> 
 
    </div> 
 
</div> 
 
<div id="wpcf7-fp09-p448-ol"> 
 
    <div class="screen-reader-response"></div> 
 
    <form> 
 
    <div class="business-form-kaufen"> 
 
     Lorem ipsum dolor sit amet 
 
    </div> 
 
    </form> 
 

 
</div>

Answer 2

あなたは、ボタンから2つのDIVのレベルが上がるし、次のDIVに移動し、そこに.business-form-kaufenを見つける必要があります。

$(".button").click(function() { 
    $(this).parent().parent().next().find(".business-form-kaufen").slideToggle(); 
}); 

Answer 3

私はformとbusiness-form-kaufenを前提とは1対1の関係がありますか？コンテナに入れてparents()を使用してを探してfind()を探してください。

このように、コードは、DOM構造をハードコードする必要なしにbusiness-form-kaufenを探すのに十分スマートです。