根据孩子和班级选择表项

Question

I have a search function to filter my table. The code:

var $rows = $('#table tbody tr');
$('#search').keyup(function () {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    var $matched = $rows.show().filter(function () {
        var text = $(this).children(":eq(" + "1" + ")").text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

HTML

<tbody>

        @foreach (BuyAndSellAppWeb.Models.Advertisment objProduct in Model)
            {

                <tr class="ugly">
                    @if (objProduct.SellerToken)
                    {
                        <td>

                            @Html.ActionLink("Ändra", "Edit", new { id = objProduct.ID }) | @Html.ActionLink("Radera", "DeleteItem", new { id = objProduct.ID }) @*|@Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })*@

                        </td>
                    }
                    else
                    {
                        <td>
                            @Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })
                        </td>
                    }
                    <td>                       
                        @Html.ActionLink(@objProduct.ProductTitle, "Details", new { id = objProduct.ID })  
                    </td>
                    <td>@objProduct.Price kr</td>
                    <td>@objProduct.Created.ToString("yyyy/MMM/dd")</td>
                    <td class="category">@objProduct.Category</td>
                </tr>
            }
        </tbody>

How do I match children only equal to column 1 and that has class "ugly" attached to the items tr in the table body section?

Answer 1

You could use the selectors like :

$(":first-child",this).hasClass('ugly')
//OR
$(":nth-child(1)", this).hasClass('ugly')
//OR
$(this).children(":first").hasClass('ugly')
//OR
$(this).children()[index].hasClass('ugly')

Hope this helps.

Answer 2

How do I match children only equal to column 1 and that has class "ugly" attached to the items tr in the table body section?

Like this?

 //1) tbody rows only //2) tr has class 'ugly' var $rows = $('#table tbody tr.ugly'); $('#search').on('input', function () { //reset previous hides $rows.show(); var searchValue = this.value.trim().toLowerCase().replace(/ +/g, ' '); //3) column 1 only var $firstColumns = $rows.find('td:first-child'); $firstColumns.filter(function(){ return this.innerHTML.toLowerCase().replace(/ +/g, ' ').indexOf(searchValue) < 0; }).closest('tr').hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> </thead> <tbody> <tr class="ugly"> <td>Apple</td> <td>Banana</td> <td>Orange</td> </tr> <tr class="ugly"> <td>Milk</td> <td>Tea</td> <td>Coffee</td> </tr> </tbody> </table> <input type="text" id="search"> 

Answer 3

You can use :first-child or :nth-child(1). But selector should be like this.

<tbody>
    <tr class="ugly">
        <td>...</td>
    </tr>
</tbody>

<script>
    var uglies = $('.ugly'); // $('tr.ugly') , $('tbody tr.ugly')
    // The best choice is
    var firstUgly = $('tbody > tr.ugly:first-child');
    // The firstUgly could be <tr class="ugly">...</tr>
</script>

This will return first tr which has 'ugly' class.