如何从jquery选择器中排除特定的div?

时间:2017-04-21 08:27:13

标签: javascript jquery

我的移动网络左侧有一个滑动菜单,这里是菜单html

<div class="swipe" style="height: 433px; left: 0px;">
    <div class="swipe-menu">

<div class="nav-container-mobile">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="sf-menu-block">
                    <div id="menu-icon" class="">categories</div>
                    <ul class="sf-menu-phone" style="display: none;">
                        <li class="level0 nav-1 first level-top parent"><a href="http://example.com/products.html" class="level-top"><span>product</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
        <a href="http://example.com/" title="home" class="home-link">home</a>
        <ul class="links">
                        <li class="first"><a href="http://example.com/customer/account/" title="account">My account</a></li>
                                <li class=" last"><a href="http://example.com/customer/account/login/" title="login" onclick="return false;">Login</a></li>
            </ul>


        <div class="footer-links-menu"> 
            <ul>
<li><a href="http://example.com/about">test</a></li>
<li><a href="http://example.com/customer-service">test</a></li>
<li><a href="http://example.com/template-settings">test</a></li>
<li class="last privacy"><a href="http://example.com/privacy-policy-cookie-restriction-mode">priva</a></li>
</ul>  
            <ul class="links-2">
    <li class="first"><a href="http://example.com/catalog/seo_sitemap/product/">Product Sitemap</a></li>
    <li><a href="http://example.com/catalog/seo_sitemap/category/">Category Sitemap</a></li>

    <li><a href="http://example.com/sales/guest/form/">Order</a></li>
</ul>        </div>
    </div>
</div>

此js将切换为幻灯片,

    function swipe_animate_true(){
        jQuery('.swipe-control').addClass('active');
        jQuery('.swipe').stop(true).animate({'left':'0'},300);
    }
    function swipe_animate_false(){
        jQuery('.swipe-control').removeClass('active');
        jQuery('.swipe').stop(true).animate({'left':'-237px'},400);
    }
    jQuery('.swipe-control').click(function(){
        swipe_animate_true();
        mini_form_hide();
        if(jQuery(this).parents('body').hasClass('ind')){
            jQuery(this).parents('body').removeClass('ind');
            swipe_animate_false()
            return false
        }
        else{
            jQuery(this).parents('body').addClass('ind');
            swipe_animate_true()
            return false
        }
    })

我想排除.sf-menu-block,它将作为幻灯片切换,我试过了

jQuery('.swipe:not(.sf-menu-block)').stop(true).animate({'left':'-237px'},400);

}

但它没有用,有谁知道怎么做?

enter image description here

------------------更新--------------------
试过

jQuery(".swipe  > :not(.nav-container-mobile)").stop(true).animate({'left':'-237px'},400);

但这会使左上角的按钮无法滑出菜单。

1 个答案:

答案 0 :(得分:0)

<强> HTML:

<div>
    Sandip
    <div class="sf-menu-block">
        my div
    </div>
</div>

你可以删除匹配类&#34; sf-menu-block&#34;的div标签。根据您的要求使用javascript,如下所示:

var divBlock = document.getElementsByClassName("sf-menu-block")[0];
divBlock.outerHTML = '';

为您的案例删除JQuery中的任何元素

$("div").not($(".sf-menu-block"))

如果您尝试使用$("div").length,则会将 2 作为长度,而$("div").not($(".sf-menu-block")).length则会为您提供 1

在您的语法中可能是:

jQuery('.swipe').not(jQuery('.sf-menu-block')).stop(true).animate({'left':'-237px'},400);