webforms：如果項被隱藏，如何刪除DOM元素

Question

我在一個小的asp.net項目中使用的水平導航存在一個問題。 導航包含登錄，配置文件和注銷錨點，如果您已登錄，則將顯示這些錨點。

我通過在“隱藏代碼”中設置.Visible屬性來實現此行為。

現在，我想在每個元素之后添加一個管道作為“分隔線”。 這一定不能成為實際列表項的一部分，因為它會影響a：hover效果。

但是，即使元素不在 DOM樹中，也會顯示管道分隔符。 看起來像

登錄| | |

我試圖用解決

if ($("li.nav-item").length == 0) {
            $('span.divider').remove();
        }
        if ($("li.nav-item").length > 0 && $("li.nav-item").is(':visible')) {
            $('<span class="divider"> | </span>').appendTo('li.nav-item');
        }

但這不起作用。 我該如何解決？

親切的問候。

/ edit：html標記（已編輯的ID）

<ul id="navigation">
                <li class="nav-item"><asp:HyperLink ID="link1" runat ="server" Text="LoremIpsum"      NavigateUrl="#" /></li>
                <li class="nav-item"><asp:LinkButton ID="LoremIpsum" runat ="server" Text="LoremIpsum" PostBackUrl="~/#.aspx"  /></li>
                <li class="nav-item"><asp:HyperLink ID="link2" runat="server"  Text="LoremIpsum" NavigateUrl="#.aspx"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkLogin" runat="server" Text="Login" NavigateUrl="~/login.aspx"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkProfile" runat="server" Text="Profile" NavigateUrl="~/profile.aspx" Visible="false"/></li>
                <li class="nav-item"><asp:HyperLink ID="linkLogout" runat="server" Text="Logout" NavigateUrl="~/logout.aspx" Visible="false"/></li>
                <li><asp:HyperLink ID="LoremIpsum" runat="server" Text="LoremIpsum" NavigateUrl="~/nutzungsbedingungen.aspx"/></li>
                </ul>


if (Session["svar_loggedin"] != null)
    {
        linkLogin.Visible = false;
        linkProfile.Visible = true;
        linkLogout.Visible = true;
    }
    else
    {
        linkLogin.Visible = true;
        linkProfile.Visible = false;
        linkLogout.Visible = false;
    }

Answer 1

試試這個js代替：

$.each($("li.nav-item").children("a").filter(":visible"), function (e) {
    $('<span class="divider"> | </span>').appendTo($(this));
});

編輯：

使用css代替Visible屬性：

linkLogin.Attributes.Add("style", "display:none")

或alt。 遍歷控件，檢查是否可見== true，如果是，則將span-markup添加到Text-attribute

Answer 2

  $(function () {
        var elements = $('li.nav-item > a').filter(':visible');
        for (var i = 0; i < elements.length - 1; i++) {
            elements.eq(i).append($('<span class="divider"> | </span>'));
        }

    });

就我而言，這是成功的秘訣。 我沒有意識到我的背后代碼正在更改asp：Hyperlink控件，而不是列表項。

我相應地更改了我的Jquery代碼段，使其與所有錨（它們是“ nav-item”類的列表項的子項）相關。

謝謝大家讓我重回正軌！