事例1：

最近项目中要为聊天增加未读消息在对方读后变成已读的功能，和后台商量了具体逻辑之后，前后台都写好了逻辑，剩下的就是利用jQuery的find()方法将未读消息变为已读消息。

相关代码

    <style>
        html,
        body {
            min-height: 100%;
            height: 100%;
            background-color: #f7f7f7;
        }
      .talkContainter {
            padding: 20px 12px;
            padding-bottom: 72px;
            background: #f7f7f7;
      }
      .timeTitle {
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }

      .timeTitle span {
            background: #cacbcc;
            color: #fff;
            border-radius: 4px;
            padding: 0 8px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
        }
      .talkItem {
            display: flex;
            align-items: center;
       }
      .sendMess1 {
            background: #ffffff;
            color: #333;
            border-radius: 5px;
            padding: 0 10px;
            line-height: 35px;
            min-height: 35px;
            height: 100%;
            margin-right: 5px;
        }
      .read{
              position: absolute;
              margin-right:2px;
              color:#808080;
              font-size:10px;
              color: #ffffff;
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 4px;
              padding: 1.5px 1.5px;

        }
        .unReadColor{
          background-color:#cacbcc;
        }

</style>
<body id="bodyId">

    <div class="talkContainter" id="talkContainter">
      <div class='timeTitle'>
        <span>2006-04-14</span>
      </div>
        <section class='talkItem' style='direction: ltr;'>
          <span>
            <img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
          </span>
          <span style='position:relative;margin-left:5px;'>
            <span class='sendMess1'>CoderZB</span>
            <span class='triangelSend1'></span>
          </span>
          <div style='height:35px;'><span class='read unReadColor'>未读</span></div>
        </section>

      <div class='timeTitle'>
        <span>1935-07-14</span>
      </div>
        <section class='talkItem' style='direction: rtl;'>
          <span>
            <img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
          </span>
          <span style='position:relative;margin-left:5px;'>
            <span class='sendMess1'>Love Share</span>
            <span class='triangelSend1'></span>
          </span>
          <div style='height:35px;'><span class='read unReadColor'>未读</span></div>
        </section>

      <div class='timeTitle'>
        <span>1935-07-14</span>
      </div>
        <section class='talkItem' style='direction: rtl;'>
          <span>
            <img style='width:50px;height:50px;border-radius:50%;' class='iconImg' src='http://ymzp.0633hr.com/upload/app/2019-04-16/1555399938228-2019-04-16.jpg' />
          </span>
          <span style='position:relative;margin-left:5px;'>
            <span class='sendMess1'>Love Life</span>
            <span class='triangelSend1'></span>
          </span>
          <div style='height:35px;'><span class='read unReadColor'>未读</span></div>
        </section>
    </div>



</body>

jQuery find()实现未读消息变已读消息

  $("#talkContainter").find(".read").text("已读");
  $("#talkContainter").find(".read").css({"background-color":"#70c67f"});

image.png

事例2：

两个div分别控制顶部标签栏和中部标签栏
选中中间标签栏的某个标签(例如暂停中)的时候，此时滚动标签栏到顶部时，要让顶部标签栏中的暂停中选中。
反之选中顶部标签栏中的某个标签(例如暂停中)的时候，此时滚动标签栏到中部时，要让中部标签栏中的暂停中选中。

相关代码

    <style>
        body {
            background: #fff;
            color: #333;
        }
      .screen {
            background: white;
        }
      .menuBox {
            height: 44px;
            width: 100%;
            display: flex;
            background: white;
            border-bottom: 1px solid #eaebeb;
        }
      .menuBox .screen-middle {
            flex-grow: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: relative;
            justify-content: center;
        }
      .menuBox .screen-middle-top {
            flex-grow: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: relative;
            justify-content: center;
        }
      .screen-middle div {
            font-size: 13px;
        }

      .tab-active {
            font-weight: bold;
        }
        .tab-active:before {
            content: '';
            width: 20px;
            height: 3px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0px;
            margin: auto;
            z-index: 4;
            background-color: #ff9829;
            border-radius: 9px;
        }


       .doubleTitle {
            display: none;
            position: fixed;
            width: 100%;
            flex-direction: column;
            z-index: 99;
            background: #fff;
        }

</style>
<body>

  <div class="doubleTitle">
        <div class="status" style="width:100%;background:#ff9829;"></div>
        <div class="menuBox" >
            <div class="screen-middle-top tab-active"  tapmode>
                <div class="nav" title="all">全部</div>
            </div>
            <div class="screen-middle-top" tapmode>
                <div class="nav" title="hiring">招聘中</div>
            </div>
            <div class="screen-middle-top" tapmode>
                <div class="nav" title="pause">暂停中</div>
            </div>
            <div class="screen-middle-top" tapmode>
                <div class="nav" title="over">已结束</div>
            </div>
            <div class="screen-middle-top" tapmode>
                <div class="nav" title="confirm">待审核</div>
            </div>
            <div class="screen-middle-top" tapmode>
                <div class="nav" title="rejected">审核驳回</div>
            </div>
        </div>
  </div>

  <div class="screen">
        <div class="menuBox">
            <div class="screen-middle tab-active" tapmode>
                <div class="nav" title="all">全部</div>
            </div>
            <div class="screen-middle" tapmode>
                <div class="nav" title="hiring">招聘中</div>
            </div>
            <div class="screen-middle" tapmode>
                <div class="nav" title="pause">暂停中</div>
            </div>
            <div class="screen-middle" tapmode>
                <div class="nav" title="over">已结束</div>
            </div>
            <div class="screen-middle" tapmode>
                <div class="nav" title="confirm">待审核</div>
            </div>
            <div class="screen-middle" tapmode>
                <div class="nav" title="rejected">审核驳回</div>
            </div>
        </div>
    </div>
</body>

jQuery find()为当前选中的标签添加类选择器，并同时为另一个功能一样的标签添加同样的类选择器

// 给类选择器为screen-middle的标签添加点击事件
        $('.screen-middle').on('click', function() {
            // 给当前点击的screen-middle添加tab-active选择器，移除和screen-middle同级的tab-active类选择器
            $(this).addClass('tab-active').siblings().removeClass('tab-active');
                    // 在screen-middle里面找到类名为nav的标签，取出该标签title属性中的值
                    ordetType = $(this).find('.nav').attr('title');
                    // 遍历类选择器为screen-middle-top的标签 内容的长度
                    for (var i = 0; i <= $('.screen-middle-top').length; i++) {
                      // 如果 第i个screen-middle-top中的 名为nav的类选择器的title对应的值 等于ordetType，就执行{}
                      if($(".screen-middle-top").eq(i).find(".nav").attr('title') == ordetType){
                        console.log($(".screen-middle-top").eq(i).find(".nav").attr('title'));
                         // 移除screen-middle-top的所有tab-active
                         $(".screen-middle-top").removeClass('tab-active');
                         // 为遍历出的符合要求的 第i个screen-middle-top 添加tab-active。
                         $(".screen-middle-top").eq(i).addClass('tab-active');
                      }
                    }
                      // 网络请求
                     fnGetJobData(false);
        })


        // 给类选择器为screen-middle-top的标签添加点击事件
        $('.screen-middle-top').on('click', function() {
           // 给当前点击的screen-middle添加tab-active选择器，移除和screen-middle同级的tab-active类选择器
            $(this).addClass('tab-active').siblings().removeClass('tab-active')
                    // 在screen-middle里面找到类名为nav的标签，取出该标签title属性中的值
                    ordetType = $(this).find('.nav').attr('title');
                   // 遍历类选择器为screen-middle的标签 内容的长度
                    for (var i = 0; i <= $('.screen-middle').length; i++) {
                      // 如果 第i个screen-middle中的 名为nav的类选择器的title对应的值 等于ordetType，就执行{}
                      if($(".screen-middle").eq(i).find(".nav").attr('title') == ordetType){
                        // 移除screen-middle的所有tab-active
                         $(".screen-middle").removeClass('tab-active');
                        // 为遍历出的符合要求的 第i个screen-middle添加tab-active。
                          $(".screen-middle").eq(i).addClass('tab-active');
                      }
                    }
                     fnGetJobData(false);

        })

101.175524.gif

screen-middle.png

screen-middle-top.png

转载于:https://www.jianshu.com/p/629cc5930690

jQuery find()用法[自己项目中的]

事例1：

相关代码

jQuery find()实现未读消息变已读消息

事例2：

相关代码

jQuery find()为当前选中的标签添加类选择器，并同时为另一个功能一样的标签添加同样的类选择器

猜你喜欢