如何避免特定类应用CSS

Question

我的HTML

<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
     <div id="txt_blog_editor" class="box" style="width: 1097px;">
      <div class="abc anotherclass">

       </div>
    </div>
 </div>
</div>
<div class="abc"></div>
</body>

我的剧本

 $('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
        var pos = $(this).offset();
        console.log(pos.left+"||"+pos.top);
        var left_pos=(pos.left-15)+"px";
        var top_pos=(pos.top+35)+"px";
               $(".abc").css({position: "absolute", top: top_pos,  left: left_pos });
               $(".abc").show();
               $(".popup").show();
        });

    });

我想申请的left和top ，以abc类是没有父母不给类，这是在id="txt_blog_editor"

Answer 1

根据此答案，这里是一个有效的代码段：

 jQuery.expr[':'].noparents = function(a,i,m){ return jQuery(a).parents(m[3]).length < 1; }; var elts = $(".abc").filter(":noparents(#txt_blog_editor)"); elts.css({ "background-color": "green" });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="finalparent"> <!--many parent divs here--> <div id="1stparent"> <div id="txt_blog_editor" class="box" style="width: 1097px;"> <div class="abc anotherclass"> ABC With Parent </div> </div> </div> </div> <div class="abc">ABC WITHOUT Parent</div>

基本上，您创建一个新的jQuery表达式:noparents ，该表达式返回没有选择器赋予父母的元素

Answer 2

您需要检查.abc是否具有父项#txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/

        $('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
        var pos = $(this).offset();
        console.log(pos.left+"||"+pos.top);
        var left_pos=(pos.left-15)+"px";
        var top_pos=(pos.top+35)+"px";

         $('.abc').each(function(){
            if (!$(this).parents('#txt_blog_editor').length) {
                 $(this).css({position: "absolute",top: top_pos,  left: left_pos });
                           $(this).show();
                           $(".popup").show();
            }
        });

});

Answer 3

如果abc类只是body的直接子代，为什么不使用body> .abc作为选择器呢？

如何避免特定类应用CSS

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-09-25 09:24:06

解决方案2
0 2014-09-25 08:48:41

解决方案3
0 2014-09-25 09:59:09

如何避免特定类应用CSS

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-09-25 09:24:06

解决方案2 0 2014-09-25 08:48:41

解决方案3 0 2014-09-25 09:59:09

解决方案1
1 已采纳 2014-09-25 09:24:06

解决方案2
0 2014-09-25 08:48:41

解决方案3
0 2014-09-25 09:59:09