从嵌套div结构预填表单:前端设计建议

Question

我正在构建一个项目列表，这些项目将从数据库中提取，并形成一个嵌套的-div结构，深度约为3，基本上会有一行划分为不同的部分。

当用户单击该行时，我希望打开模态编辑器并将该行的数据预填充，基本上只需将相关字段的内容复制到模态表单中即可。

我知道怎么做，但看起来很难看，基本上是这样的：

$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

康斯坦丁

如果您将单击操作放在‘..context item-editor’上，您将能够轻松地浏览每个"HTML对象“DOM树。

下面是你的案例的一个小模拟：https://jsfiddle.net/n6v522fp/2/，我希望它能帮助你的案例。

​

$(document).ready(function(){

  $('.content-item-wrapper').on('click', function(){
  	$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>

​