在jQuery中使用数组作为选择器

Question

我在jQuery中遇到了一些麻烦。

$(document).on('change', '.filter-status, .filter-week', function() {
    var filter = [];
    filter.push({
        week: $('.filter-week').val(),
        status: $('.filter-status').val(),
    })

    //filter.week('week', $('.filter-week').val());
    filter.status = $('.filter-status').val();
    var tags = [];
    //console.log(filter);
    $.each(filter, function(index, value) {
        if (value != 'all') {
            tags.push(value);
        }
    });
});

我有一个表格行，如下所示：

<tr>
    <td>1</td>
    <td>Some text...
    <td>
        <button class="tag" data-tag="1234"></button>
        <button class="tag" data-tag="1235"></button>
    </td>
</tr>
<tr>
    <td>2</td>
    <td>Some text...
    <td>
        <button class="tag" data-tag="1234"></button>
    </td>
</tr>

我要做的是隐藏不包含标签1234和1235的tr。

修改

要更清楚一点。

tags对象包含id 1234和1235.我想隐藏所有没有这两个标记的表行。因此，如果表行只有1234，则应该隐藏它。如果它只有1235，它也应该被隐藏。如果它同时包含1234和1235，则不应隐藏它。

Answer 1

您可以使用.filter()：

$('table tr').filter(function(i, el) {
  return $(el).find('button').eq(0).data('tag') != '1234' ||
    $(el).find('button').eq(1).data('tag') != '1235'
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>Some text...</td>
    <td>
      <button class="tag" data-tag="1234"></button>
      <button class="tag" data-tag="1235"></button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Some text...</td>
    <td>
      <button class="tag" data-tag="1234"></button>
    </td>
  </tr>
</table>

Answer 2

以下内容将隐藏与tags数组具有相同值的所有行（我已在您的按钮列中添加了一个类）。

比较功能取自this question

＆＃13;

＆＃13;

Array.prototype.compare = function(testArr) {
    if (this.length != testArr.length) return false;
    for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { 
            if (!this[i].compare(testArr[i])) return false;
        }
        if (this[i] !== testArr[i]) return false;
    }
    return true;
}

var tags = [1234, 1235];  // example tags array
$('.button-holder').filter(function() {
    // put data attributes into an array
    var buttonsData = [];
    $(this).find('button.tag').each(function() {
        buttonsData.push(parseInt($(this).data('tag')));
    });
    
    return !tags.compare(buttonsData);  // compare the arrays
}).closest('tr').hide();  // hide the row if the values are not the same

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>1</td>
    <td>Some text...
    <td class="button-holder"> <!-- add class to button column -->
        <button class="tag" data-tag="1234"></button>
        <button class="tag" data-tag="1235"></button>
    </td>
</tr>
<tr>
    <td>2</td>
    <td>Some text...
    <td class="button-holder">
        <button class="tag" data-tag="1234"></button>
    </td>
</tr>
<tr>
    <td>3</td>
    <td>Some text...
    <td class="button-holder">
        <button class="tag" data-tag="1234"></button>
        <button class="tag" data-tag="1235"></button>
        <button class="tag" data-tag="1236"></button>
    </td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

如果您想要显示可能包含标签值和附加内容的所有行，您可以使用以下containsAll函数代替上面的比较函数：

＆＃13;

＆＃13;

Array.prototype.containsAll = function(needles){ 
  for(var i = 0 , len = needles.length; i < len; i++){
     if($.inArray(needles[i], this) == -1) return false;
  }
  return true;
}

var tags = [1234, 1235];
$('.button-holder').filter(function() {
    var buttonsData = [];
    $(this).find('button.tag').each(function() {
        buttonsData.push(parseInt($(this).data('tag')));
    });
    
    return !buttonsData.containsAll(tags);
}).closest('tr').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>1</td>
    <td>Some text...
    <td class="button-holder">
        <button class="tag" data-tag="1234"></button>
        <button class="tag" data-tag="1235"></button>
    </td>
</tr>
<tr>
    <td>2</td>
    <td>Some text...
    <td class="button-holder">
        <button class="tag" data-tag="1234"></button>
    </td>
</tr>
<tr>
    <td>3</td>
    <td>Some text...
    <td class="button-holder">
        <button class="tag" data-tag="1234"></button>
        <button class="tag" data-tag="1235"></button>
        <button class="tag" data-tag="1236"></button>
    </td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以找到该元素，然后返回parents()查找相关的<tr>：

$(':not([data-tag="1235"])').each(function() {
     $(this).parents('tr').hide();
});

编辑应有的评论，我误解了这个问题：

  

隐藏不包含标记1234和1235的tr。

我在阅读时错过了不