JSの特定の親構造に基づいてエレメントを選択する方法は？

Question

親構造がdiv.main-element input + label + ulの場合にのみ、グラブを取得するスクリプトを作成しようとしています。

javascriptまたはjqueryを使用して設定する方法はありますか？

、誰もが絶対に素晴らしいだろう適切な答えまたはドキュメントに私を指示することができれば。

私の最終目標は、（APPENDまたは.replaceのいずれかを使用して時間のタグが付けられたUL>李を置き換えることであろう）ここ

は私のHTMLです：

<div class='main-element'> 
    <input> 
    <label></label> 
    <ul> 
     <li>Example</li> 
    </ul> 
</div> 
<div class='main-element'> 
    <input> 
    <label></label> 
</div> 

Answer 1

あなたが提供することができます要素を取得する親コンテナであるjquery呼び出しの2番目の引数です。同じことをするfind関数もあります。

HTML：

<div class='main-element'> 
    <input> 
    <label></label> 
    <ul> 
     <li>Example</li> 
    </ul> 
</div> 
<div class='secondary-element'> 
    <input> 
    <label></label> 
</div> 

JS：

var $secondaryElement = $('.secondary-element'); 
var $secondaryInput = $('input', $secondaryElement); 

別のアプローチ：

var $secondaryInput = $('.secondary-element').find('input'); 

上記の例の両方はsecondary-element DIVの内部唯一の入力要素を返します。

あなたの質問にお答えしますか？

リンク：

if($("div.main-element ul li").length){ 
//your code 
} 

：

https://api.jquery.com/find/

と

https://api.jquery.com/jquery/#selector-context

Answer 2

したい要素はjqueryの中でこの種のコードを使用して存在するかどうかを確認できましたこれはoを実行しますnは、あなたのHTMLの例では、あなたの隣には、使用して最初の要素の値を変更することができます

$("div.main-element ul li").append("blahblahblah"); 

注これはあなたがdiv.main要素の内部で最初に見つかったのliタグへのアクセスを提供することを> HTMLページのUL 。

Answer 3

これは、あなたのコンポジションのすべての要素を取得し、ul> liをhrで置き換えます。

var elements = document.querySelectorAll(".main-element input+label+ul li"); 

for(var i = 0; i < elements.length; i++){ 
    var parent = elements[i].parentNode.parentNode; 
    var ul = elements[i].parentNode; 
    ul.parentNode.removeChild(ul); 
    var hr = document.createElement("hr"); 
    parent.appendChild(hr); 
}