我想檢查一個元素是否具有其他元素內部的特定類名

Question

我的應用程序中有多個表行，想要刪除其中之一。 我有一個功能，當我單擊一個按鈕時，會創建另一個表行。

首先我有：

<table>
    <thead> ... </thead>
    <tbody>
    <tr id='firstObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr>
    <tr id='secondObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr> ....

但是，如果我單擊i則類icon-chevron-right變為icon-chevron-down ，我得到：

<tbody>
<tr id='firstObject'> <td> <i class="icon-chevron-down clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr>
<tr id='info'> ... </tr>
<tr id='secondObject'> <td> <i class="icon-chevron-right clickable expand-alert"></i> </td> <td> @Ajax.RawActionLink("<i class='icon-trash'></i>", "_DeleteAlert", "Group", new { alertId = alert.Id }, new AjaxOptions
    {
         HttpMethod = "POST",
         OnSuccess = "onDeleteAlertSuccess(" + alert.Id + ")"
    }, new { @title = "Verwijder alarm" }) </td> </tr> ....

沒有訣竅。 如果我單擊DeleteButton，我想刪除該行，如果$(i).hasClass('icon-chevron-down')也刪除下一行，即id='info' 。 我的代碼tr沒有id，這只是為了更好地說明它。

這是我的功能：

    function onDeleteAlertSuccess(id) {
        $('#alert-detail-table').find('tr').each(function () {
            if ($(this).attr('data-id') == id) {
                $(this).fadeOut(400, function () {
                    if ($(this).next($('td').next($('i').hasClass('icon-chevron-down')))) {
                        $(this).next('tr').remove();
                    }
                    $(this).remove();
                });
            }
        });
    }

第二個if始終為true，但如果!$('i').hasClass('icon-chevron-down')必須為false。 現在，如果id='icon-chevron-right' ，則刪除下一個id='secondObject'表行，這是不對的。

我該如何解決這個問題？

編輯：

我在傑里米（Jérémy）的幫助下解決了這個問題：

    function onDeleteAlertSuccess(id) {
        $('#alert-detail-table').find('tr').each(function () {
            if ($(this).attr('data-id') == id) {
                $(this).fadeOut(400, function () {
                    var tr = $(this);
                    var nextElement = tr.next();

                    tr.find("i").each(function () {
                        if ($(this).hasClass("icon-chevron-down")) {
                            nextElement.remove();
                        }
                    });
                    //if ($(this).first($('td:first-child').hasClass('icon-chevron-down'))) {
                    //    debugger;
                    //}
                    //if ($(this).next($('td').next($('i').hasClass('icon-chevron-down')))) {
                    //    $(this).next('tr').remove();
                    //}
                    $(this).remove();
                });
            }
        });
    }

Answer 1

如Shivan在評論中所說，您的代碼未鏈接，但我仍嘗試使用此代碼。 如果我了解得很好，則單擊刪除按鈕應刪除鏈接的行，並且如果其中定義了某些類，則刪除該行之后的行。

因此，我做了一些小提琴，展示了如何使用jQuery輕松做到這一點： jsfiddle

$( function() {
    $( document ).on( "click", ".deleteLink", function() {
        var tr = $( this ).parent().parent();
        var nextElement = tr.next();

        if( nextElement.hasClass( "notLink" ) ) {
            nextElement.remove();    
        }

        tr.remove();

        return false;
    });
});

notLink是應該由其上一行刪除的tr的類，而deleteLink是您的刪除按鈕的類

編輯：

如果該類在i元素上，而不在tr ，則檢查它也很簡單； 請查看更新的小提琴和對應的代碼：

$( function() {
    $( document ).on( "click", ".deleteLink", function() {
        var tr = $( this ).parent().parent();
        var nextElement = tr.next();

        nextElement.find( "i" ).each( function() {
            if( $( this ).hasClass( "toRemove" ) ) {
                nextElement.remove();   
            }
        });

        tr.remove();

        return false;
    });
});