javascript - jQuery 查找 不为空且具有特定类名

Question

我有一个脚本可以将表解析为 json。

这样的效果很好

    <thead id="itemspecthead" class="itemspectheadc">
  <tr>
    <th class="ishead isheadname">Name</th>
    <th class="ishead isheadvalue">Value</th>
  </tr>
    </thead>

与脚本逻辑:

  var headers = [];

  $(rows.shift()).find('th:first:not(:empty), th:nth-child(2):not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });

但为了使表格风格化，我在表格标题中添加了其他几行。

    <thead id="itemspecthead" class="itemspectheadc">
        <tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
     <tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
  <tr>
    <th class="ishead isheadname">Name</th>
    <th class="ishead isheadvalue">Value</th>
  </tr>
    </thead>

如果我删除了我的 thead 中的两个额外行，脚本就可以正常工作。看来错误是在这个逻辑中 .find('th:first:not(:empty), th:nth-child(2):not(:empty)')

我尝试将其更改为 .find('th.ishead:first:not(:empty), 和 .find('.ishead th:first:not(: empty), 通过类名找到它，但运气不好。

如何在我的 thead 中保留额外的 colspan="2" 行的同时定位我的 ishead 行？

这是我的 onclick 函数，它现在返回 name,value,name,value(出于某种原因将其复制两次......)。这实际上是我的整个点击功能脚本，我删除了所有其他内容。

$(document).on('click', '#editjson', function() {

  var headers = [];

    $('th.ishead:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });
  alert('headers: ' + headers);
  console.log(headers);
  });

返回名称、值、名称、值...

Answer 1

将 :not(:empty) 直接应用到所有 th (不是任何特定的)

像下面这样:-

$(rows.shift()).find('th.ishead:not(:empty)').each(function () {
  headers.push($(this).text().toLowerCase());
});

工作样本:-

$(document).ready(function(){
  var headers = [];

  $('th.ishead:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });
 console.log(headers);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead id="itemspecthead" class="itemspectheadc">
  <tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
  <tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
  <tr>
    <th class="ishead isheadname">Name</th>
    <th class="ishead isheadvalue">Value</th>
  </tr>
</thead>
</table>