jQuery |目标祖父母兄弟姐妹

Question

在更改或加载时，只要用户 select 有网格选项，我就会尝试将 class 添加到 pull-left 或将 pull-right 添加到 div（ block_left、media_right) 是 select 或祖父母 grid 的兄弟姐妹。但是我无法select兄弟姐妹

这是HTML

<div data-name="grid">
    <div class="label">
        <label>Grid</label>
    </div>
    <div class="input">
        <select>
            <option value="left_right">Left / Right</option>
            <option value="left_media">Content / Media</option>
            <option value="media_right" selected="selected">Media / Content</option>
        </select>
    </div>
</div>

<div data-name=“block_left”></div>

<div data-name=“media”></div>

这是jQuery

function blockGrid() {
    var gridSelect = $('[data-name=”grid”] select');

    $(gridSelect).each(function( index ) {
        console.log( index + ": " + $( this ).val() );

        // On Load
        if($(this).val() == “media_right” ) {
            $(this).closest('[data-name="grid"]').find('[data-name="media"]').addClass('pull-xs-left');
            $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').addClass('pull-xs-right');
        };


        // On Change
        $(this).change(function() {
            console.log('Grid changed to ' + $(this).val());

            if($(this).val() == “media_right” ) {
                $(this).closest('[data-name="grid"]').find('[data-name="media"]').addClass('pull-xs-left');
                $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').addClass('pull-xs-right');
            } else {
                $(this).closest('[data-name="grid"]').find('[data-name="media"]').removeClass('pull-xs-left');
                $(this).closest('[data-name="grid"]').find('[data-name="block_left"]').removeClass('pull-xs-right');
            };
        });
    });
};

Answer 1

find doesn't look for siblings, it looks for descendants. siblings 寻找兄弟姐妹。

所以

$(this).closest('[data-name="grid"]').siblings('[data-name="media"]').addClass('pull-xs-left');
// -----------------------------------^^^^^^^^

...等等。

或者，将整个结构包装在一个公共容器中，使用 closest 上升到该容器（例如，data-name="grid" 之上的一层），然后然后使用 find.

旁注：我怀疑这只是你问问题时引入的问题，但兄弟姐妹的引号是错误的：

<div data-name=“block_left”></div>

<div data-name=“media”></div>

那些 “ 个字符应该是 "（或 '，或者根本没有引号，因为您的值恰好符合根本不需要引号的要求）。

jQuery |目标祖父母兄弟姐妹

jQuery | Target grandparent siblings

html

jquery

parent

siblings