获取 jQuery .filter() 结果的相反/倒数

Question

我有一个.filter 函数，它可以工作并将包含红色输入字段的<td> 的所有父级标记。

但是，我需要完全相反。所以返回所有不包含<input 的字段。 我试过if ($(this).html().indexOf('<input') == -1) {，但这只是以某种方式标记所有行。

我的 jQuery：

$(document).ready(function () {
        $("#ListView1_itemPlaceholderContainer table table table td").filter(function (index) {
            if ($(this).html().indexOf('<input') > 0) {
                return true;
            }
        }).closest('div').css('background-color', 'red');
});

这是我的 HTML

 <div id="ListView1_itemPlaceholderContainer" style=
  "font-family: Verdana, Arial, Helvetica, sans-serif;">
    <div style="background-color: #FFFFFF; color: #333333;">
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td style="width: 71px"><img id="ListView1_userInfo1_0_ImageUser_0" src=
            "http://pbs.twimg.com/profile_images/13/6GA5kEu6_normal.png" style=
            "height:65px;width:65px;" /></td>

            <td style="vertical-align: top">
              <table style="width: 100%;">
                <tbody>
                  <tr>
                    <td></td>
                  </tr>

                  <tr>
                    <td>
                      <table style="width: 100%;">
                        <tbody>
                          <tr>
                            <td><img id="ListView1_userInfo1_0_Imagebg_0" src=
                            "https://pbs.twimg.com/profile_banners/13/1402427948" style=
                            "height:64px;width:251px;" /><br />
                            <span id="ListView1_userInfo1_0_LabelName_0">dfgdfg</span>
                            &nbsp; @<span id=
                            "ListView1_userInfo1_0_LabelUserName_0">dfgdfg</span></td>

                            <td style="text-align: right"></td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td><span style="font-size:10px">Follower-<span id=
                    "ListView1_userInfo1_0_LabelFollower_0">4578</span> &nbsp; ,
                    Following-<span id=
                    "ListView1_userInfo1_0_LabelFollowing_0">1654</span></span></td>
                  </tr>

                  <tr>
                    <td><span id="ListView1_userInfo1_0_LabelAbout_0"></span></td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table><br />
    </div>

    <div style="background-color: #EEEEEE;color: #333333;">
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td style="width: 71px"><img id="ListView1_userInfo_1_ImageUser_1" src=
            "http://pbs.twimg.com/profile_images/12/ECWtACTn_normal.jpeg" style=
            "height:65px;width:65px;" /></td>

            <td style="vertical-align: top">
              <table style="width: 100%;">
                <tbody>
                  <tr>
                    <td></td>
                  </tr>

                  <tr>
                    <td>
                      <table style="width: 100%;">
                        <tbody>
                          <tr>
                            <td><img id="ListView1_userInfo_1_Imagebg_1" src=
                            "http://pbs.twimg.com/profile_background_images/37/pTBlAXSm.jpeg"
                            style="height:64px;width:251px;" /><br />
                            <span id="ListView1_userInfo_1_LabelName_1">dfgdfgd</span>
                            &nbsp; @<span id=
                            "ListView1_userInfo_1_LabelUserName_1">dfgdfgdf</span></td>

                            <td style="text-align: right"><input type="submit" name=
                            "ListView1$ctrl1$userInfo$ButtonFollow" value="Follow" id=
                            "ListView1_userInfo_1_ButtonFollow_1" style=
                            "height:100px;width:100px;" /></td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>

                  <tr>
                    <td><span style="font-size:10px">Follower-<span id=
                    "ListView1_userInfo_1_LabelFollower_1">4622</span> &nbsp; ,
                    Following-<span id=
                    "ListView1_userInfo_1_LabelFollowing_1">4007</span></span></td>
                  </tr>

                  <tr>
                    <td><span id="ListView1_userInfo_1_LabelAbout_1"></span></td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table><br />
    </div>
  </div>

我还按照评论者的建议查看了这篇帖子 jQuery: use filter(), but work with both results。

并尝试了这个：

<script type="text/javascript">

    $(document).ready(function () {
        $.fn.invert = function () {
            return this.end().not(this);
        };

        $("#ListView1_itemPlaceholderContainer table table table td").filter(function (index) {
            if ($(this).html().indexOf('<input') > 0) {
                return true;
            }
        }).invert().closest('div').css('background-color', 'red');
    });

</script>

但这也会使所有行都变成红色。

Answer 1

您可以将.not() 与:has() 一起使用

$(document).ready(function () {
        $("#ListView1_itemPlaceholderContainer table table table td").not(':has(input)').closest('div').css('background-color', 'red');
});

Answer 2

我认为你应该接受 Arun 的回答。问题是 indexOf 返回第一个匹配字符 http://www.w3schools.com/jsref/jsref_indexof.asp 的索引，在您的情况下它将为 0，因此条件 > 0 将不适用。另外对于 == -1 为所有行着色的问题，最好将您的函数应用于 tr 而不是 td

你可以把你的函数改成

$(document).ready(function () {
        $("#ListView1_itemPlaceholderContainer table table table tr").filter(function (index) {
            if ($(this).html().indexOf('<input') > -1) {
                return true;
            }
        }).closest('div').css('background-color', 'red');
});

将带有 input 的行标记为红色，或反转条件以执行相反的操作。或者更好 按照 Arun 的建议使用不同的选择器。

用 input 将行标记为红色的小提琴http://jsfiddle.net/q9othg59/2/ 并为相反的http://jsfiddle.net/q9othg59/4/提供小提琴