在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。

編輯

要更清楚一點。

標簽對象包含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

以下內容將隱藏與標簽數組具有相同值的所有行（我已在按鈕列中添加了一個類）。

比較功能已取自該問題

 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 

 <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> 

如果要顯示所有可能包含標簽值和附加值的行，則可以使用以下containsAll函數，而不是上面的compares函數：

 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(); 

 <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> 

Answer 3

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

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

編輯了我誤解了這個問題的適當評論：

隱藏不包含標簽1234和1235的tr。

我錯過了沒有 ，當我讀它