ネストされたdiv構造からフォームをプリフィルする：フロントエンドの設計アドバイス

Question

私はアイテムのリストを構築しています。これらはデータベースから引き出され、3の深さについてネストされたdiv構造になります。異なるセクション。

ユーザーがその行をクリックすると、モーダルエディタを開き、その行のデータを事前に入力する必要があります。基本的には、関連フィールドの内容をモーダルフォームにコピーします。

私はこれを行う方法を見ていますが、それは本当に醜い、このような基本的なもの：

$children = $($(this).parents()[1]).find('div'); 
$modalFields = $("#context-item-editor").find('input', 'textarea'); 

そして私はつもりそれぞれの子にインデックスで参照しに関連する分野でそれと一致していますフォーム...

これに接近するより良い方法があるのでしょうか？もしそうでなければ、find（）メソッドは常に要素の順序を保持しますか？ここで

は行構造をどのように見えるかです：

<div class="row content-item-wrapper"> 
    <div class="row item-header"> 
     <div class="col-sm-2 source"> 
     Source: <a href="http://www.newsru.com/world/20nov2017/soros.html">NewsRU</a> 
     </div> 
     <div class="col-sm-10 content-item-topic"> 
     Topic: WW2 
     </div> 
    </div> 
    <div class="row item-body"> 
     <div class="col-sm-1 content-item-id"> 
     (135) 
     </div> 
     <div class="col-sm-1 content-item-date-created"> 
     12.05.2017 
     </div> 
     <div class="col-sm-9 content-item-text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
    </div> 
    </div> 

、ここでは、モーダルフォームです：

<div class="modal-content context-item-editor"> 
    <span class="close" id=closeEditor>&times;</span> 

    <form> 
    <div class="form-group"> 
     <label for="topic">Номер в базе данных:</label> 
     <input type="text" class="form-control" readonly id="modalID"> 
    </div> 
    <div class="form-group"> 
     <label for="topic">Date and time:</label> 
     <input type="text" class="form-control" readonly id="modalDateTime"> 
    </div> 
    <div class="form-group"> 
     <label for="topic">Source:</label> 
     <input type="text" class="form-control" id="modalSource"> 
    </div> 
    <div class="form-group"> 
     <label for="topic">Topic:</label> 
     <input type="text" class="form-control" id="modalTopic"> 
    </div> 
    <div class="form-group"> 
     <label for="txt">Text:</label> 
     <textarea class="form-control" rows="5" id="modalTxt"></textarea> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

</div> 

Answer 1

コンスタンチン、

あなたの場合https://jsfiddle.net/n6v522fp/2/ 私はそれがあなたのケースを助けることを願って：あなたは簡単にそれぞれの 『HTMLオブジェクト』 DOMツリーを

をナビゲートすることができるでしょう「.context項目エディタ」をクリックアクションがここにあなたの例小さなシミュレーションのput 。

$(document).ready(function(){ 
 

 
    $('.content-item-wrapper').on('click', function(){ 
 
    \t $row = $(this); 
 
    $('.modalform').dialog({ 
 
     modal: true, 
 
     open: function(event, ui){ 
 
     var source = $row.children('.item-header').children('.source').children('a').text(); 
 
     var topic = $row.children('.item-header').children('.content-item-topic').text(); 
 
     $('#modalSource').val(source); 
 
     $('#modalTopic').val(topic); 
 
     } 
 
    }); 
 
    }) 
 

 
});

.modalform { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div class="row content-item-wrapper"> 
 
    <div class="row item-header"> 
 
     <div class="col-sm-2 source"> 
 
     Source: <a href="http://www.newsru.com/world/20nov2017/soros.html">NewsRU</a> 
 
     </div> 
 
     <div class="col-sm-10 content-item-topic"> 
 
     Topic: WW2 
 
     </div> 
 
    </div> 
 
    <div class="row item-body"> 
 
     <div class="col-sm-1 content-item-id"> 
 
     (135) 
 
     </div> 
 
     <div class="col-sm-1 content-item-date-created"> 
 
     12.05.2017 
 
     </div> 
 
     <div class="col-sm-9 content-item-text"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="modal-content context-item-editor"> 
 
    <span class="close" id=closeEditor>&times;</span> 
 
</div> 
 

 
<form class="modalform"> 
 
    <div class="form-group"> 
 
    <label for="topic">Номер в базе данных:</label> 
 
    <input type="text" class="form-control" readonly id="modalID"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="topic">Date and time:</label> 
 
    <input type="text" class="form-control" readonly id="modalDateTime"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="topic">Source:</label> 
 
    <input type="text" class="form-control" id="modalSource"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="topic">Topic:</label> 
 
    <input type="text" class="form-control" id="modalTopic"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="txt">Text:</label> 
 
    <textarea class="form-control" rows="5" id="modalTxt"></textarea> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>