jQuery - 包含|为什么这个不起作用,而其他同样的作品呢?

时间:2017-06-26 08:21:09

标签: javascript jquery html css

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”,所以为什么第二个没有?也应该像第一个更大的字体大小

一样工作

1 个答案:

答案 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/