HTML:
<form action="http://localhost/projekt2/posts" class="posts" method="post" accept-charset="utf-8">
<span class="left-margin-span"><a href="#" id="all">Wszystkie (90)</a> | <a href="#" id="published">Opublikowane (89)</a> | <a href="#" id="planned">Zaplanowane (5)</a>
</span>
<div class="top-left-margin">
<input type="submit" name="delete-checked" value="Usuń zaznaczone" class="delete-checked" />
<select name="select-date">
<option value="0" selected="selected">Wszystkie Daty</option>
<option value="201705">Maj 2017</option>
<option value="201706">Czerwiec 2017</option>
<option value="201701">Styczeń 2017</option>
<option value="Invalid Date">Invalid Date</option>
</select>
<select name="select-category">
<option value="0" selected="selected">Wszystkie Kategorie</option>
<option value="ale nie no kurde w dupe">ale nie no kurde w dupe</option>
<option value="Informatyka">Informatyka</option>
<option value="Mleczkooooo">Mleczkooooo</option>
</select>
<input type="submit" name="filter" value="Przefiltruj" id="filter" />
Razem 90
</div>
<div class="container-wide">
<div class="title"><span class="container-wide-center-span">Posty</span>
</div>
<div class="content">
<table class="table2">
<tr>
<td>
<input id="checkall" type="checkbox">
</td>
<td>
Tytuł
</td>
<td>
Kategorie
</td>
<td>
Data
</td>
</tr>
</table>
<table class="table1">
<tr id="row-1">
<td>
<input type="checkbox" name="post[]" value="1" />
</td>
<td>
Przykładowy Tytuł Strony </td>
<td>
<a href="#">ale nie no kurde w dupe</a>, </td>
<td>
2017-05-28 </td>
</tr>
<tr id="row-3">
<td>
<input type="checkbox" name="post[]" value="3" />
</td>
<td>
Burde lubie kielbaske se zjesc! </td>
<td>
<a href="#">Informatyka</a>, <a href="#">ale nie no kurde w dupe</a>, </td>
<td>
2017-05-04 </td>
</tr>
<tr id="row-4">
<td>
<input type="checkbox" name="post[]" value="4" />
</td>
<td>
Post do kibasy </td>
<td>
<a href="#">Mleczkooooo</a>, </td>
<td>
2017-06-13 </td>
</tr>
<tr id="row-5">
<td>
<input type="checkbox" name="post[]" value="5" />
</td>
<td>
Fajne to co nie </td>
<td>
<a href="#">ale nie no kurde w dupe</a>, </td>
<td>
2017-01-13 </td>
</tr>
<tr id="row-64">
<td>
<input type="checkbox" name="post[]" value="64" />
</td>
<td>
3 </td>
<td>
</td>
<td>
0000-00-00 </td>
</tr>
<tr id="row-66">
<td>
<input type="checkbox" name="post[]" value="66" />
</td>
<td>
5 </td>
<td>
</td>
<td>
0000-00-00 </td>
</tr>
</table>
</div>
</div>
</form>
jQuery的:
$('input#filter').on('click', function(form) {
form.preventDefault();
var category = $('select[name="select-category"]').val();
alert(category);
$( 'table.table1 tbody tr td:contains("' + category + '")' ).css( "font-size", "50px" );
$( 'table.table1 tbody tr td:contains("' + category + '")' ).each(function () {
// $( 'table.table1 tbody tr td:contains("' + category + '")' ).css( "font-size", "50px" );
// $( 'table.table1 tbody tr td:contains("' + category + '")' ).each(function () {
if ($(this).text() == category)
{
$(this).closest('tr').remove();
}
});
});
看看这两行:
$( 'table.table1 tbody tr td:contains("' + category + '")' ).css( "font-size", "50px" );
和
$( 'table.table1 tbody tr td:contains("' + category + '")' ).each(function () {
完美无缺。包含var类别的单词的整个td现在是50px font-size。
但是几乎相同的第二行不起作用,不会删除最接近的tr。
但他们是选择相同的元素。看,它们是一样的:
$( 'table.table1 tbody tr td:contains("' + category + '")' )
为什么?
当我向其添加“a”时,第二个适用于我,所以它看起来像:
$( 'table.table1 tbody tr td a:contains("' + category + '")' )
它有效......但为什么不提前呢?
第一个完美没有“a”,所以为什么第二个没有?也应该像第一个更大的字体大小
一样工作答案 0 :(得分:1)
我在这里收集了答案的要点。
$( 'table.table1 tbody tr td:contains("' + category + '")' )
效率不高,因为将使用所有表格单元格。最好只检查相关的单元格,在第3列的情况下:
$( 'table.table1 tbody tr td:nth-of-type(3):contains("' + category + '")' ).each(function () {
缩短代码的当前小提琴:https://jsfiddle.net/vtq19z96/3/