如何在排除特定类名时使用find（）。each（）

时间：2017-03-10 02:39:22

标签： jquery

我目前有将HTML表格导出为CSV文件的脚本。

它按预期工作并导出表格，但它会导出所有内容。
我想要排除其中包含.hidden类的行。

我尝试在:not()部分使用.not()选择器和.find("tr")方法，但这两种方法似乎都没有效果。

以下是遍历<tr>的代码部分:(整个脚本来自此js插件，名为Table2Download）

$(this).find("tr:not(.hidden)").each(function () {
    if ($(this).find("td").length > 0) {
        var sep = "";
        $(this).find("td").each(function () {
            csv += sep + settings.quotes + $(this).text() + settings.quotes;
            sep = settings.separator;
        });
        csv += settings.newline;                
    } else if ($(this).find("th").length > 0) {
        var sep = "";
        $(this).find("th").each(function () {
            csv += sep + settings.quotes + $(this).text() + settings.quotes;
            sep = settings.separator;
        });
        csv += settings.newline;                
   }
 }

以下是HTML表格示例：

<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
      <th> something else </th>
  </tr></thead>
  <tbody>
    <tr class="hidden">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">4</td>
    </tr>

    <tr class="even">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">5</td>
    </tr>

    <tr class="odd">
       <td title="Name">John Doe</td>
       <td title="Test">exam 2</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">7</td>
    </tr>

    <tr class="even">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">03/08/2017</td>
        <td title="Score">7</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">4</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">3</td>
    </tr>
  </tbody>
</table>

任何帮助将不胜感激！

4 个答案:

答案 0 :(得分：1)

$("tr:not(.hidden)").each(function() {
  $(this).find("td").css("color", "red")




})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
      <th> something else </th>
    </tr>
  </thead>
  <tbody>
    <tr class="hidden">
      <td title="Name">John Doe</td>
      <td title="Test">exam 1</td>
      <td title="Date">03/08/2017</td>
      <td title="Score">4</td>
    </tr>

    <tr class="even">
      <td title="Name">John Doe</td>
      <td title="Test">exam 1</td>
      <td title="Date">03/08/2017</td>
      <td title="Score">5</td>
    </tr>

    <tr class="odd">
      <td title="Name">John Doe</td>
      <td title="Test">exam 2</td>
      <td title="Date">03/08/2017</td>
      <td title="Score">7</td>
    </tr>

    <tr class="even">
      <td title="Name">Wendy Doe</td>
      <td title="Test">exam 1</td>
      <td title="Date">03/08/2017</td>
      <td title="Score">7</td>
    </tr>

    <tr class="hidden">
      <td title="Name">Wendy Doe</td>
      <td title="Test">exam 1</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">4</td>
    </tr>

    <tr class="hidden">
      <td title="Name">Wendy Doe</td>
      <td title="Test">exam 1</td>
      <td title="Date">02/11/2017</td>
      <td title="Score">3</td>
    </tr>
  </tbody>
</table>

仅使用$("tr:not(.hidden)")

答案 1 :(得分：1)

似乎对我来说工作正常。我将.test-table代替this。但完全删除.find()并仅仅针对tr也可以像guradio的回答一样。

＆＃13;
＆＃13; 
var csv = '';
var settings = {quotes:'"',separator:',',newline:"\n"}
$(".test-table").find("tr:not(.hidden)").each(function () {
    if ($(this).find("td").length > 0) {
        var sep = "";
        $(this).find("td").each(function () {
            csv += sep + settings.quotes + $(this).text() + settings.quotes;
            sep = settings.separator;
        });
        csv += settings.newline;                
    } else if ($(this).find("th").length > 0) {
        var sep = "";
        $(this).find("th").each(function () {
            csv += sep + settings.quotes + $(this).text() + settings.quotes;
            sep = settings.separator;
        });
        csv += settings.newline;                
   }
 });
 console.log(csv);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
      <th> something else </th>
  </tr></thead>
  <tbody>
    <tr class="hidden">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">4</td>
    </tr>

    <tr class="even">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">5</td>
    </tr>

    <tr class="odd">
       <td title="Name">John Doe</td>
       <td title="Test">exam 2</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">7</td>
    </tr>

    <tr class="even">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">03/08/2017</td>
        <td title="Score">7</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">4</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

WordPress预先打包了一份jQuery。

当加载WordPress的jQuery时，它使用compatibility mode，这是一种避免与其他语言库冲突的机制。

因此，您无法像在其他项目中那样直接使用美元符号 $ 。在为WordPress编写jQuery时，您需要使用 jQuery 。查看以下示例：

＆＃13;
＆＃13; 
var $hiddenTr = jQuery("tr").not(".hidden");

$hiddenTr.each(function() {
    jQuery(this).find("td").hide();
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="test-table">
  <thead>
    <tr role="row">
      <th> Name </th>
      <th> Test </th>
      <th> Date </th>
      <th> Score </th>
      <th> something else </th>
  </tr></thead>
  <tbody>
    <tr class="hidden">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">4</td>
    </tr>

    <tr class="even">
       <td title="Name">John Doe</td>
       <td title="Test">exam 1</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">5</td>
    </tr>

    <tr class="odd">
       <td title="Name">John Doe</td>
       <td title="Test">exam 2</td>
       <td title="Date">03/08/2017</td>
       <td title="Score">7</td>
    </tr>

    <tr class="even">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">03/08/2017</td>
        <td title="Score">7</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">4</td>
    </tr>

    <tr class="hidden">
        <td title="Name">Wendy Doe</td>
        <td title="Test">exam 1</td>
        <td title="Date">02/11/2017</td>
        <td title="Score">3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

感谢所有发帖!! 我通过使用另一个脚本为这个做了一个工作！

我认为以前代码的问题是导出链接运行并在我的其他javascript代码之前创建文件，因此它不会读取仅通过javascript添加的.hidden类（带复选框{ {1}}事件）。

无论如何，使用这个新代码我会稍微更改一下，用此行排除onchange类。

.hidden
相关问题
最新问题