Question

在更改或加载时，无论何时用户选择网格选项，我都会尝试将该类添加到左侧或右侧拉到div（block_left，media_right）兄弟姐妹选择祖父母grid。但是我无法选择兄弟姐妹。

这是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不寻找兄弟姐妹，寻找后代。 siblings寻找兄弟姐妹。

所以

load_and_authorize_resource

......等等。

或者，将整个结构包装在一个公共容器中，使用$(this).closest('[data-name="grid"]').siblings('[data-name="media"]').addClass('pull-xs-left'); // -----------------------------------^^^^^^^^前往该容器（例如，高于closest的一个级别），然后然后使用{ {1}}。

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

data-name="grid"

这些find字符应为<div data-name=“block_left”></div> <div data-name=“media”></div>（或“，或根本没有引号，因为您的值符合完全不需要引号的要求。

jQuery |目标祖父母兄弟姐妹

1 个答案: