仅获取 jQuery 中连续每个 td 的第一个子节点

Question

例如我有这种 table

<table>
  <tr>
    <td><input textbox text="test1">         <!-- FIND only this element -->
        <div></div>
    </td>
    <td>test2        <!-- FIND only this text and disregard checkbox input-->
         <checkbox>
    </td>
  </tr>
</table>

我正在制作一个 .each() 函数，它只会获取每行每个 td 的每个第一个元素的值。

我试过了 $(this).find('tr td:first-child').each() 函数，但我知道这只会得到每一行的第一个 td，它不会遍历我想要的每个 td。

Answer 1

<table border="1" class="myTable">
  <tr>
    <td>
      <span>First</span>
      <span>Second</span>
      <span>Third</span>
    </td>
    <td>
      <span>First</span>
      <span>Second</span>
      <span>Third</span>
    </td>
  </tr>
</table>

    //jQuery code
    $('.myTable tr td').each(function() {

        //First child of td
      $(this).children(':first').css('color', 'red');

    });

这里是working sample

如果您只需要第一个元素的文本，那么您可以使用 text() 函数

$('.myTable tr td').each(function() {

  //First child of td
  var firstChild = $(this).children(':first');
  alert(firstChild.text());

});

Answer 2

在您的情况下，您需要 td 标签内任何内容的第一个值，包括文本节点，因此您可以尝试使用 childNodes or .contents():

示例：

$('table tr td').each(function() {
  console.log($(this).contents()[0]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input textbox text="test1">         <!-- FIND only this element -->
        <div></div>
    </td>
    <td>test2        <!-- FIND only this text and disregard checkbox input-->
         <checkbox></checkbox>
    </td>
  </tr>
</table>

或没有jquery:

document.querySelectorAll('table tr td').forEach(function(td) {
  console.log(td.childNodes[0]);
});

<table>
  <tr>
    <td><input textbox text="test1">         <!-- FIND only this element -->
        <div></div>
    </td>
    <td>test2        <!-- FIND only this text and disregard checkbox input-->
         <checkbox></checkbox>
    </td>
  </tr>
</table>

Answer 3

$('table tr td').each(function() {

 //First child of td
  $(this).children(':first').css('border-color', 'red'); 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input textbox text="test1" value="name">         <!-- FIND only this element -->
        <div></div>
    </td>
    <td>test2  <input type="checkbox">
    </td>
  </tr>
   <tr>
    <td><input textbox text="test1">  
        <div></div>
    </td>
    <td>test2  
        <input type="checkbox">
    </td>
  </tr>
   <tr>
    <td><input textbox text="test1">        
        <div></div>
    </td>
    <td>test2 <input type="checkbox">
    </td>
  </tr>
   <tr>
    <td><input textbox text="test1" value="name"> 
        <div></div>
    </td>
    <td>test2 <input type="checkbox">
    </td>
  </tr>
</table>

希望这对您有所帮助

仅获取 jQuery 中连续每个 td 的第一个子节点

Get only the first child of every td in a row in jQuery

jquery

html-table

each