Разбор div, встроенный в div с jquery

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. Ожидаемый результат заключался в том, что парсинг родительского div с идентификатором «report-agent-data», получение дочернего div с атрибутом класса «agent-data» из «agent-id», а затем получение дочернего div со значением класса «r-name». Вместо этого я получаю только первое значение идентификатора дочернего агента, а 3 экземпляра 'r-name' остаются пустыми.

Любая помощь приветствуется

Answer 1

Внутри $(tmpdiv).each() используйте $(this) вместо $(tmpdiv). Также переместите свой код var agent_id = $(tmpdiv).attr('agent-id'); и используйте здесь $(this).

Используйте .text() вместо .val() в $(this).find('.r-name').text();. .val() не применяется для div.

Проверьте это ниже.

$('#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() {
      var agent_id = $(this).attr('agent-id');
      console.log("agent_id: " + agent_id);
      var rname = $(this).find('.r-name').text();
      console.log("rname: " + rname);
    });
  });

});

.reported-cell {
  display: inline-flex;
  width: 20%;
  border: 1px solid;
}

.reported-cell-textarea {
  border: 1px solid;
}

<input type='button' id='presend_btn' value='presend_btn' />

<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>

Answer 2

Проблема в том, что .val () возвращается только тогда, когда есть значение в элементе input или атрибуте данных.

В вашем случае есть NONE и что вам, по-видимому, нужен .text вашего r-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>