jquery 怎么给上级添加类名?

jquery 怎么给上级添加类名?,第1张

var my_li = $('li')

if(my_li.hasClass("on")) {

my_li.parent().addClass("active")

}

用hasClass()方法来是否含有某个类

用parent()可以定位到当前元素的父元素

可以使用hasclass()方法来判断,hasClass() 方法检查被选元素是否包含指定的 class,语法为:$(selector).hasClass(class)

工具原料:编辑器、浏览器

1、设置一个按钮点击后判断一个段落是不是有指定的类,相关代码逻辑见代码注释,代码如下:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){//获取按钮元素并绑定点击事件

    alert($("p:first").hasClass("intro"))//d出元素p应用hasclass方法的返回值,如果该元素存在intro的类则d出true否则false

  })

})

</script>

<style type="text/css">

.intro

{

font-size:120%

color:red

}

</style>

</head>

<body>

<h1 id="h1">This is a heading</h1>

<p class="intro">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>检查第一个段落是否拥有类 "intro"</button>

</body>

2、从以上代码中可知,第一个元素p确实存在class为intro的类则hasclass的运行结果是true:

这种mouseover和mouseout可以直接使用hover函数,判断在3个spebox都没有active类用if ($(".spebox.active").length == 0)

<!DOCTYPE html>

<!--STATUS OK-->

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

    <meta property="wb:webmaster" content="3aababe5ed22e23c" />

    <meta name="referrer" content="always" />

    <title>jquery怎么判断标签是否有指定类,如果没有就添加,代码如下_百度知道</title>

    <style>

        .spebox { display: inline-block float: left border: 1px solid #CCC width: 100px height: 40px margin-right: 5px }

        .spebox.active { background-color: #DDD }

    </style>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        $(function () {

            $(".spebox").hover(function () {

                $(this).addClass("active")

                if (!$(this).hasClass("close")) {

                    $(".close").removeClass("active")

                }

            }, function () {

                $(this).removeClass("active")

                if ($(".spebox.active").length == 0) {

                    $(".close").addClass("active")

                }

            })

        })

    </script>

</head>

<body>

    <div class="box1" id="box1">

        <a>

            <div class="close active spebox"></div>

        </a>

        <a>

            <div class="shose spebox"></div>

        </a>

        <a>

            <div class="access spebox"></div>

        </a>

    </div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11716901.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存