在 each() 循环中遍历每个项目的子项目

Question

我目前有选择 tr table 并且在这个 tr 中有 tds 和 labels。我想获得这些标签的价值。

这怎么可能？

代码

<tr>
    <td>  
        <span class="display-mode" style="display: inline;">1 </span> 
        <label id="lblid" class="edit-mode" style="display: none;">1</label> 
    </td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
        <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
        <button class="save-user edit-mode" style="display: none;">Save</button>
        <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
</tr>

我试过这样的事情：

tr.children().each(function ()
{
    alert(this);
    $(this).children.each(function() 
    {
        alert(this);
    })

Answer 1

您可以遍历所有 td 并在其中找到 label 并使用 .text() 读取其中的文本。看下面的代码

$(function(){
  var tr = $("table tr:last"); // assuming that you got your tr already, i am considering last tr.
   //now find td and labels inside it
  tr.find('td').each(function(){
     console.log($(this).find('label').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>  
        <span class="display-mode" style="display: inline;">1 </span> 
        <label id="lblid" class="edit-mode" style="display: none;">1</label> 
    </td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
        <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
        <button class="save-user edit-mode" style="display: none;">Save</button>
        <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
</tr>
</table>

Answer 2

你的问题

$(this).children.each

是 children 是一个函数您可以调用 jQuery 集合 - 它不是静态的属性。如果您想通过 each 进行迭代，则必须调用 .children():

$(this).children().each

如果您已经 select 编辑了 tr，那么您可以 select 它的后代并通过 select 或 (label,此处）与 .find:

const tr = $('#thetr');

tr.find('label').each(function() {
  console.log(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="thetr">
    <td>
      <span class="display-mode" style="display: inline;">1 </span>
      <label id="lblid" class="edit-mode" style="display: none;">1</label>
    </td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
      <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
      <button class="save-user edit-mode" style="display: none;">Save</button>
      <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
  </tr>
</table>

在 each() 循环中遍历每个项目的子项目

Iterate through child item of each item in each() loop

each

jquery

children

代码