webforms : 항목이 숨겨져있는 경우 DOM 요소를 제거하는 방법

Question

작은 asp.net 프로젝트에서 사용하는 가로 방향 탐색에 문제가 있습니다. nav에는 로그인 한 경우 표시되는 로그인, 프로필 및 로그 아웃 앵커가 포함되어 있습니다.

코드 숨김에서 .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'); 
     } 

하지만이 나던 작업으로 해결 시도

. 이 문제를 어떻게 해결할 수 있습니까?

친절하게 제공합니다.

/편집 : 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의 경우 그래서 이것은 속임수를 썼는지 내 경우에 텍스트 속성

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 : 하이퍼 링크 컨트롤을 변경하고 목록 항목을 변경하지 않는다는 사실을 깨닫지 못했습니다.

따라서 'Javery Snippet'을 'nav-item'클래스가있는 목록 항목의 하위 항목 인 모든 앵커와 관련되도록 변경했습니다.

다시 정상에 오르는 것에 감사드립니다!