隱藏除過濾對象中定義的ID以外的所有錶行

Question

我正在使用錶行過濾腳本。

最初，所有的表格行都是可見的，但是在操作了一些下拉菜單/表格之後，過濾條件決定了哪些行將可見，哪些不可見。例如：

var jobs = [{ 
 
    id: 0, 
 
    company: "Google", 
 
    location: "Zurich" 
 
}, { 
 
    id: 1, 
 
    company: "Facebook", 
 
    location: "Ireland" 
 
}]; 
 

 
// this function isn't run in this example for reasons of brevity. it's to show how the jobs array is generated 
 
const filterRow = function (data, filters) { 
 
    let filtersEnabled = Object.keys(filters).filter(element => filters[element].length !== 0); 
 
    return data.filter(row => { 
 
    return filtersEnabled.every(k => { 
 
     return filters[k].indexOf(row[k]) !== -1 
 
    }) 
 
    }) 
 
} 
 

 
let $tableRows = $('table tbody tr'); 
 

 
const updateDisplay = function() { 
 
    // that's not ideal 
 
    $tableRows.addClass('hidden') 
 
    jobs.forEach((row) => { 
 
    $(`[data-id="${row.id}"]`).removeClass('hidden') 
 
    }) 
 
} 
 

 
$('.js-filter').on('click',() => updateDisplay())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<button class="js-filter">filter table now</button> 
 
<table class="table table-bordered"> 
 
    <tbody> 
 
    <tr data-company="google" data-id="0" data-loation="zurich"> 
 
     <td>Google</td> 
 
     <td>Zurich</td> 
 
     <td>0</td> 
 
    </tr> 
 
    <tr data-company="facebook" data-id="1" data-loation="ireland"> 
 
     <td>Facebook</td> 
 
     <td>Ireland</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr data-company="microsoft" data-id="2" data-loation="california"> 
 
     <td>microsoft</td> 
 
     <td>California</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

的作業陣列確定哪些行要可見。 （所以在這種情況下，只有ID爲0和1的行纔會被看到

鑑於jobs數組正在以編程方式改變，我想用jQuery（或其他）方法直接隱藏帶ID的行不存在陣列中（從而是能夠使用animate.css淡出排出來等

我目前做的是

1. 隱藏所有行，
2. 然後顯示在陣列中的人。那是相當一個解決方法，它使我的轉換/動畫複雜化。

Answer 1

您可以使用jQuery .filter() method遍歷行並對其進行過濾。

在每次迭代中，您都可以通過使用.some() method來檢查在jobs陣列中是否找到該行的data-id屬性。從那裏，您可以返回布爾值並過濾出具有匹配jobs陣列中的對象的id的行。

$rows.filter((index, row) => { 
    return !jobs.some(job => job.id === +row.dataset.id); 
}).addClass('hidden'); 

或者，你也可以使用jQuery的.not() method代替.filter()：

$rows.not((index, row) => { 
    return jobs.some(job => job.id === +row.dataset.id); 
}).addClass('hidden'); 

或者，如果你想打破isJobById到另一個功能：

const isJobById = id => jobs.some(job => job.id === +id); 
const updateDisplay =() => { 
    $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden'); 
} 

你也可以改變以下行：

$('.js-filter').on('click',() => updateDisplay()); 

..並直接傳遞updateDisplay功能：

$('.js-filter').on('click', updateDisplay); 

全部片段：

var jobs = [{ 
 
    id: 0, 
 
    company: "Google", 
 
    location: "Zurich" 
 
}, { 
 
    id: 1, 
 
    company: "Facebook", 
 
    location: "Ireland" 
 
}]; 
 

 
let $rows = $('table tbody tr'); 
 
const isJobById = id => jobs.some(job => job.id === +id); 
 
const updateDisplay =() => { 
 
    $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden'); 
 
} 
 

 
$('.js-filter').on('click', updateDisplay);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<button class="js-filter">filter table now</button> 
 
<table class="table table-bordered"> 
 
    <tbody> 
 
    <tr data-company="google" data-id="0" data-loation="zurich"> 
 
     <td>Google</td> 
 
     <td>Zurich</td> 
 
     <td>0</td> 
 
    </tr> 
 
    <tr data-company="facebook" data-id="1" data-loation="ireland"> 
 
     <td>Facebook</td> 
 
     <td>Ireland</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr data-company="microsoft" data-id="2" data-loation="california"> 
 
     <td>microsoft</td> 
 
     <td>California</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>