Question

I have a aproblem with a horizontal navigation I am using in a small asp.net project.
The nav contains a Login, Profile and Logout anchor, which are displayed if you are logged in, or not.

I am realizing this behaviour by setting .Visible attribute in Code Behind.

Now i want to add a pipe after every element as a “divider”. This must not be a part of the actual list item itself because it would screw over the a:hover effect.

But even if the element is not in the DOM tree, die pipe-divider is shown.
which looks like

Login | | |

I have tried solving it with

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');
        }

but this doesnt work. How can I solve this?

Kind regards.

/edit: html markup (edited IDs)

<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

Try this js instead:

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

EDIT:

Either use css instead of Visible property:

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

or alt. iterate through the controls, check if visible == true, if so add the span-markup to the Text-attribute