Jquery 在遍历DOM以使div正好出现在另一个元素之前时遇到问题

当我运行下面显示的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);

$（'.AddToRole'）。单击（函数（evt）{
var path=document.URL；
var thisUser=this.value；
var-previousControl=$（this.prev（'.AvailableRoles'）；
var newUserRole=previousControl[0]。选项[previousControl[0]。selectedIndex]。文本；
var newHTML=“X”+newUserRole+“
”；
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>

@*显示用户电子邮件*@
@用户邮箱
@{
@*显示用户所属的角色*@
foreach（userRoles中的var角色）
{
@*“从角色中删除用户”按钮*@
X
@role.RoleName


}
}


@{                                                    
@*使用用户不属于的角色创建列表框*@
var items=rolesUserDoesNotBelongTo.Select（i=>newselectListItem
{
值=i.RoleName，
Text=i.RoleName
});
字符串listBoxId=“listboxRoles_”；
listBoxId=listBoxId+user.Email；
}                            
@ListBox（listBoxId，items，new{@class=“AvailableRoles”}）
@*“将用户添加到角色”按钮*@
添加到角色

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

.prev（）

不适用于您使用它的方式。它获取上一个同级元素，然后通过您传递的选择器对其进行过滤。它不查找与选择器匹配的任何上一个同级元素

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

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

其中至少有一个将不返回任何对象，除非前一个同级同时是

.AvailableRoles

和

#DisplayUserRoles

，我怀疑这正是您要查找的

---

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

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

对于DisplayUserRoles，由于文档中只能有一个具有给定ID的对象，因此您可以执行以下操作：

$('#DisplayUserRoles');

这些将得到与选择器匹配的所有以前的同级，然后只得到第一个同级

---

---

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

如前所述，如果所选元素没有兄弟元素，

.prev（）

返回空数组。如果是这种情况，请检查最近的父元素

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

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

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

---

可能只是输入错误：您没有关闭

单击事件。
}
我们需要查看您的实际HTML（从浏览器中的视图/源代码），而不是模板语言来了解如何遍历HTML。我认为问题在于.prev（）只选择相同元素类型的同级。在您的例子中，$（this）是一个按钮，因此它没有其他同级，并且.prev（）返回[]。