0

以下に示すjQueryを実行したときのpreviousDivの値は常に[]です。.prev('div') を含む .prev() 関数のいくつかのバリエーションと .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あり、あなたが探しているものであるとは思えない限り、それらの少なくとも1つはオブジェクトを返しません。

あなたがこれらで何をしようとしているのか正確にはわかりませんが、代わりにこれを行うことができます：

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

また、DisplayUserRoles の場合、ドキュメント内に特定の ID を持つオブジェクトは 1 つしか存在できないため、次のようにするだけです。

$('#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 に答える