2012-10-15 2 views
0

아래에 표시된 jQuery를 실행할 때 previousDiv의 값은 항상 []입니다. .prev ('div') 및 .prev()를 비롯한 .prev() 함수의 여러 변형을 모두 동일한 결과로 시도했습니다. 여기 다른 요소 바로 전에 div를 생성하기 위해 DOM을 탐색하는 데 문제가 있습니다.

는 jQuery를하다 :

<div> 
        @* Display user email. *@ 
        <h3>@user.Email</h3> 
        <div> 
         <div id="DisplayUserRoles"> 
          @{ 
           @* Display roles user belongs to. *@ 
           foreach (var role in userRoles) 
           { 
            @* Remove user from role button. *@ 
            <button id="[email protected]" value="@role.RoleName" onclick="RemoveUserFromRole(this);">X</button> 
            <label id="[email protected]">@role.RoleName</label> 
            <br /> 
           } 
          } 
         </div> 
         <br />        
        @{              
         @* Create ListBox with roles user does not belong to. *@ 
         var items = rolesUserDoesNotBelongTo.Select(i => new SelectListItem 
         { 
          Value = i.RoleName, 
          Text = i.RoleName 
         }); 

         string listBoxId = "listboxRoles_"; 
         listBoxId = listBoxId + user.Email; 

        }        
         @Html.ListBox(listBoxId, items, new { @class = "AvailableRoles" }) 
         @* Add user to role button. *@ 
         <button id="[email protected]" class="AddToRole" value="@user.Email">Add To Role</button> 
        </div> 
       </div> 

난 그냥 전에 다른 버튼과 레이블을 추가하는 것을 시도하고 최종 결과를 들면 다음과 같습니다

$('.AddToRole').click(function(evt) { 
var path = document.URL; 
var thisUser = this.value; 
var previousControl = $(this).prev('.AvailableRoles'); 
var newUserRole = previousControl[0].options[previousControl[0].selectedIndex].text; 
var newHTML = "<button id='button_DeleteRole_" + newUserRole +"' class='DeleteRole' value=" + newUserRole + ">X</button>&nbsp;<label id='label_DeleteRole_" + newUserRole + "'>" + newUserRole + "</label><br />"; 
var previousDiv = $(this).prev('#DisplayUserRoles'); 
$(previousDiv).append(newHTML); 

페이지의 HTML/면도기 코드 #DisplayUserRoles에 대한 닫는 div 태그.

+0

아마도 '오탈자'이벤트를 닫지 않을 것입니다. '})' – RASG

+1

HTML을 트래버스하는 방법을 알기 위해서는 템플릿 언어가 아닌 실제 HTML (브라우저의보기/소스에서)을 볼 필요가 있습니다. – jfriend00

+0

.prev()는 같은 요소 유형의 형제를 선택한다는 것이 문제라고 생각합니다. 귀하의 경우 $ (this)는 버튼이므로 다른 형제는없고 .prev()는 []를 반환합니다. –

답변

1

.prev()은 사용 방법에 따라 작동하지 않습니다. 이전 형제 요소를 가져온 다음 셀렉터별로 필터링합니다. 선택기와 일치하는 이전 형제를 찾지 않습니다. 당신은이 두 가지를 수행 할 때

따라서, 상기 이전 형제가 .AvailableRoles 나는 당신이 무엇을 찾고 있는지 의심 #DisplayUserRoles 두 경우를 제외하고 그 중

$(this).prev('.AvailableRoles'); 
$(this).prev('#DisplayUserRoles'); 

적어도 하나는 어떤 객체를 반환하지 않습니다.


나는 당신이 함께 일을하려고하는지 알고 정확히 모르겠지만, 대신이 작업을 수행 할 수 있습니다 :

$(this).prevAll('.AvailableRoles').first(); 

을 그리고 DisplayUserRoles를 들어, 이후에게 오직이있을 수있다 문서에 지정된 ID를 가진 하나의 객체, 당신은 단지이 작업을 수행 할 수 있습니다

$('#DisplayUserRoles'); 

이 셀렉터와 일치하고 단지 첫 번째를 얻을 이전의 모든 형제 자매를 얻을 것입니다.


난 당신이 (브라우저보기/소스와 함께 보는 것을) 생성 된 HTML을 게시하는 경우, 우리는 우리가 반드시 알고하지 않는 오히려 템플릿 코드보다 훨씬 더 도움이 될 수 내 댓글에 말했듯이 어떤 HTML 생성합니다.

1

위에서 설명한 것처럼 선택된 요소의 형제 요소가없는 경우 .prev()은 빈 배열을 반환합니다. 이 경우 가장 가까운 상위 요소를 확인하십시오.

var previousControl = $(this).prev(); 

if (!previousControl.length) { 
    previousControl = $(this).parent(); 
} 

previousControl.toggleClass('bestClass'); // This is just an example function 
              // call on the element