jQuery遍历div,判断是否为空,为空时执行某个操作

简介: jQuery遍历div,判断是否为空,为空时执行某个操作

以下运行结果: 20180705233304920.png代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
        <style type="text/css">
            *{margin: auto;font-family: "Hiragino Sans GB", "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;}
input:focus {outline: none;}
a{text-decoration: none;cursor: pointer;}
ul,ol,dt,li{list-style: none;margin: 0px;padding: 0px;} 
i,em{text-decoration: none;}
@font-face {
  font-family: 'iconfont';  /* project id 732843 */
  src: url('//at.alicdn.com/t/font_732843_rucp0yk4ovs.eot');
  src: url('//at.alicdn.com/t/font_732843_rucp0yk4ovs.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_732843_rucp0yk4ovs.woff') format('woff'),
  url('//at.alicdn.com/t/font_732843_rucp0yk4ovs.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_732843_rucp0yk4ovs.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.sch-list{width: 900px;height: auto;border: 1px solid #EEE;border-radius: 2px;}
.sch-list ul{overflow: hidden;width: 900px;height: auto;overflow: hidden;}
.sch-list ul li{float: left;margin-top: 30px; width: 900px;height: 170px;border-bottom: 1px solid #eee;}
.sch-list ul li:last-child{border-bottom: none;}
.list-logo{float: left;margin-left: 20px; padding: 7px;box-sizing: border-box; width: 140px;height: 140px;border: 1px solid #E8E8E8;border-radius: 2px;}
.list-logo img{width: 126px;height: 126px;}
.list-logo img:hover{opacity:0.6;filter:alpha(opacity=60);}
.list-matter{float: left; margin-left: 20px;width: 680px;height: auto;}
.list-matter h3{font-size: 18px;color: #333; margin-bottom: 10px;}
.list-matter h3:hover{color: #1184E1;}
.sch-district{float: left;font-size: 12px;color: #999;line-height: 12px;width: 483px;text-overflow:ellipsis;white-space: nowrap;
overflow: hidden;}
.icont{width: 680px;clear: both;}
.district{float: left;margin:1px 5px 0 0; color: #1fcabb;font-size: 16px;}
.list-matter span{float: left;margin:15px 20px 0 0; font-size: 12px;color: #333;display: block;}
.course{float: left;margin:1px 5px 0 0; color: #ec2480;font-size: 16px;}
.evaluate{float: left;margin:1px 5px 0 0; color: #eea819;font-size: 16px;}
.list-matter .tel{float: right;margin: 5px;font-size: 16px;}
.chat{float: left;margin:0px 6px 0 0; color: #bfebd4;font-size: 20px;}
.consult{clear: both; margin-top: 46px;font-size: 12px;line-height: 12px;color: #999;}
.stu-evaluate{margin-top: 6px;padding: 3px 0 3px 4px;box-sizing: border-box; width: 698px;height: 24px;border: 1px solid #E8E8E8;
font-size: 12px;color: #666;line-height: 18px;}
.stu-tit{float: left;width: 72px;height: 18px;font-weight: bold;}
.line{float: left;margin: 3px 4px 0 4px;width: 1px;height: 12px;background:#E8E8E8;}
.stu-matter{margin-top: 2px; width: 600px;height: 18px;}
.stu-matter:hover{color: #1184E1;cursor: pointer;}
        </style>
    </head>
    <body>
        <div class="sch-list">
            <ul>
                <li>
                    <div class="list-logo">
                        <a><img src="img/lg.png"/></a>
                    </div>
                    <div class="list-matter">
                        <h3><a>青鸟IT汇</a></h3>
                        <p class="sch-district">
                            微信关注公众号:青鸟IT汇,更多精彩竟在里面,java人脸识别,活体检测,张张嘴眨眨眼源码,js以及jar包应有尽有。还有C#实现指纹识别登陆,人脸识别等!欢迎关注!
                        </p>
                        <div class="icont">
                            <span><i class="iconfont district">&#xe65d;</i>java人脸识别</span>
                            <span><i class="iconfont course">&#xe65f;</i>微信公众号</span>
                            <span><i class="iconfont evaluate">&#xe65e;</i>人工智能</span>
                            <span class="tel"><i class="iconfont chat">&#xe65c;</i>400-601-2788转3453</span>
                        </div>
                        <p class="consult">青鸟IT汇</p>
                        <div class="stu-evaluate">
                            <div class="stu-tit">
                                学员真实评价
                            </div>
                            <div class="line"></div>
                            <p class="stu-matter sch-district">
                                学习学科英语培训课程:教学环境干净、舒适。也有专门的绘本区供孩子借阅:。交通很方便,距离家也比较近距离家也比较近                                
                            </p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-logo">
                        <a><img src="img/lg.png"/></a>
                    </div>
                    <div class="list-matter">
                        <h3><a>青鸟IT汇</a></h3>
                        <p class="sch-district">
                            微信关注公众号:青鸟IT汇,更多精彩竟在里面,java人脸识别,活体检测,张张嘴眨眨眼源码,js以及jar包应有尽有。还有C#实现指纹识别登陆,人脸识别等!欢迎关注!
                        </p>
                        <div class="icont">
                            <span><i class="iconfont district">&#xe65d;</i>java人脸识别</span>
                            <span><i class="iconfont course">&#xe65f;</i>微信公众号</span>
                            <span><i class="iconfont evaluate">&#xe65e;</i>人工智能</span>
                            <span class="tel"><i class="iconfont chat">&#xe65c;</i>400-601-2788转3453</span>
                        </div>
                        <p class="consult">青鸟IT汇</p>
                        <div class="stu-evaluate">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-logo">
                        <a><img src="img/lg.png"/></a>
                    </div>
                    <div class="list-matter">
                        <h3><a>青鸟IT汇</a></h3>
                        <p class="sch-district">
                            微信关注公众号:青鸟IT汇,更多精彩竟在里面,java人脸识别,活体检测,张张嘴眨眨眼源码,js以及jar包应有尽有。还有C#实现指纹识别登陆,人脸识别等!欢迎关注!
                        </p>
                        <div class="icont">
                            <span><i class="iconfont district">&#xe65d;</i>java人脸识别</span>
                            <span><i class="iconfont course">&#xe65f;</i>微信公众号</span>
                            <span><i class="iconfont evaluate">&#xe65e;</i>人工智能</span>
                            <span class="tel"><i class="iconfont chat">&#xe65c;</i>400-601-2788转3453</span>
                        </div>
                        <p class="consult">青鸟IT汇</p>
                        <div class="stu-evaluate">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
$(document).ready(function() {
    $(".stu-evaluate").each(function() {
        var values_stu_evaluate = ($(this).text());
        if(/^\s*?$/.test(values_stu_evaluate)) {
            //如果是空的
            $(this).prev("p").css("margin-top", "75px");
            $(this).css("border","0px");
        } else {
        }
    });
});
</script>
    </body>
</html>



目录
相关文章
|
1月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
23天前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
N..
|
1月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
8 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0