0

当我运行如下所示的 jQuery 时，previousDiv 的值始终是：[]。我尝试了 .prev() 函数的几种变体，包括 .prev('div') 和 .prev()，结果都相同。

这是jQuery：

$('.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/razor 代码：

<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="button_RemoveFromRole_@user.Email" value="@role.RoleName" onclick="RemoveUserFromRole(this);">X</button>
                                    <label id="label_RemoveFromRole_@role.RoleName">@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="button_AddToRole_@user.Email" class="AddToRole" value="@user.Email">Add To Role</button>
                    </div>
                </div>

对于最终结果，我试图在#DisplayUserRoles 的结束 div 标记之前添加另一个按钮和标签。

4

2 回答 2

1

.prev()不工作你如何使用它。它获取前一个兄弟元素，然后通过您传递的选择器对其进行过滤。它不会寻找任何与选择器匹配的先前兄弟。

因此，当您同时执行这两项操作时：

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

至少其中一个不会返回任何对象，除非前一个兄弟是两者.AvailableRoles，#DisplayUserRoles我怀疑这就是你要找的。

我不太确定我知道你想用这些做什么，但你可以这样做：

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

对于 DisplayUserRoles，由于文档中只能有一个具有给定 ID 的对象，因此您可以这样做：

$('#DisplayUserRoles');

这些将获得与选择器匹配的所有先前兄弟姐妹，然后仅获得第一个。

正如我在评论中所说，如果您发布生成的 HTML（浏览器通过 View/Source 看到的内容）而不是我们不一定知道它生成什么 HTML 的模板代码，我们可以提供更好的帮助。

于 2012-10-15T02:24:03.017 回答
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
于 2012-10-15T03:26:38.590 回答