jquery - 使用 jquery 解析嵌入在 div 中的 div

Question

我有以下html

由于我使单元格内容可编辑，因此我正在尝试解析数据。这是我的jQuery

$('#presend_btn').click(function() {
  event.preventDefault();
  console.log("presend_btn preparations");

  $('#reporting-agent-data').each(function() {
    var tmpdiv = $(this).find('.agent-data');

    var agent_id = $(tmpdiv).attr('agent-id');
    console.log("agent_id: " + agent_id);


    $(tmpdiv).each(function() {
      var rname = $(tmpdiv).find('.r-name').val();
      console.log("rname: " + rname);
    });
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="reporting-agent-data">
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="1">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="2">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="3">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'></div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
</div>

我没有从 Jquery 代码中得到想要的结果。预期的结果是解析具有 id 'reporting-agent-data' 的父 div，获取具有 'agent-id' 的类 'agent-data' 属性的子 div，然后获取具有类 'r-name' 值的子 div。相反，我只得到第一个子代理 ID 值，并且 3 个“r-name”实例为空。

任何帮助是极大的赞赏

标签： jquery

Answer 1

问题是.val()input仅在元素或数据属性上有值时才返回。

在您的情况下，NONE您显然需要的是您的.textr-name

运行下面的代码片段以查看它的工作原理。

$('#presend_btn').click(function() {
  event.preventDefault();
  console.log("presend_btn preparations");

  $('#reporting-agent-data').each(function() {
    var tmpdiv = $(this).find('.agent-data');

    
    $(tmpdiv).each(function() {
      //Agent IDs
      var agent_id = $(this).attr('agent-id');
      console.log("agent_id: " + agent_id);
       //R Names
      var rname = $(this).find('.r-name').text() //THis needs a fix
      console.log("rname: " + rname);
    });
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reporting-agent-data">
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="1">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'>1</div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="2">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'>2</div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
  <div class="row text-center agent-data equal" agent-uuid="0" agent-id="3">
    <div class="col-xs-4 col-md-2 reported-cell r-name" contenteditable='true'>3</div>
    <div class="col-xs-4 col-md-2 reported-cell r-relation" contenteditable='true'></div>
    <div class="col-xs-4 col-md-3 reported-cell r-phone" contenteditable='true'></div>
    <div class="col-xs-12 col-md-5 reported-cell-textarea r-details" contenteditable='true'></div>
  </div>
</div>

<button id="presend_btn">
 Click Me
</button>