代码之家  ›  专栏  ›  技术社区  ›  Kiran Shahi Jonny

如何使用jQuery获取边界为none的元素对象?

css html jquery javascript
  •  0
  • Kiran Shahi Jonny  · 技术社区  · 6 年前

    我有以下标记,在这里我需要得到一个没有边框的元素。我有一个jQuery代码 var $item = $('[style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;"]'); 它在下面的条件下硬编码解决了这个问题,但是 class="item" 是动态生成的,无法找到样式属性的内容。那么,如何解决这个问题,即如何得到那些没有边界的元素。 

    var $item = $('[style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;"]');

console.log($item.length);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-wrp">
   <div class="item-wrp">
      <div class="item" style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border-style: solid; border-width: 1px; border-color: rgb(0, 0, 0); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;">
         <div class="cont1">
            <div class="img-wrp" style="display: block;">
            <a href="#">
            <img style="width: 100%;" src="https://i.stack.imgur.com/17Uek.jpg" class=""></a></div>
         </div>
         <div class="cont2">
            <div class="news-cat-wrp">
            <span class="news-cat" style="color: rgb(157, 157, 157);"> Nationals</span>
            </div>
            <div class="news-tit-wrp">
            <a href="#" style="text-decoration: none; color: rgb(39, 39, 39);" class="news-tit">द भ्वाइस अफ नेपाल र हाम्रो पात्रोबीच सहकार्य</a></div>
            <div class="news-auth-wrp">
               <div class="news-auth">
                  <a class="news-auth-link" href="javascript:void(0);">
                     <span class="news-auth-name" style="color: rgb(204, 204, 204);">John Deo</span>
                  </a>
               </div>
            </div>
            <div data-title="Date" class="news-date-wrp">
            <span class="news-date" style="color: rgb(204, 204, 204);">2018-09-06</span>
            </div>
         </div>
         <div class="cont3">
            <div class="news-sum-wrp">
            <span class="news-sum" style="color: rgb(40, 40, 40);">
            २१ भदाै, काठमाडौं । विश्वकै चर्चित गायन रियालिटी शो “द भ्वाइस” को नेपाली संस्करण (फ्रेञ्चाइज) द भ्वाइस अफ नेपाल र नेपालको सबैभन्दा बढी डाउनलोड भएको जीवनशैली एप हाम्रो पात्रोबीच पहिलो सिजनको एकापसी सहक...
            </span>
            </div>
            <div class="news-btn-wrp">
            <a class="news-btn" style="text-decoration: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0); color: rgb(255, 36, 0);" href="#">Read More</a>
            </div>
         </div>
      </div>
   </div>
   <div class="item-wrp">
      <div class="item" style="width: 100%; background-color: rgb(255, 255, 255); border-radius: 0px; border: medium none; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 1px; align-self: stretch;">
         <div class="cont1">
            <div class="img-wrp" style="display: block;">
            <a href="#">
            <img style="width: 100%;" src="https://i.stack.imgur.com/17Uek.jpg" class=""></a></div>
         </div>
         <div class="cont2">
            <div class="news-cat-wrp">
            <span class="news-cat" style="color: rgb(157, 157, 157);"> Nationals</span>
            </div>
            <div class="news-tit-wrp">
            <a href="#" style="text-decoration: none; color: rgb(39, 39, 39);" class="news-tit">द भ्वाइस अफ नेपाल र हाम्रो पात्रोबीच सहकार्य</a></div>
            <div class="news-auth-wrp">
               <div class="news-auth">
                  <a class="news-auth-link" href="javascript:void(0);">
                     <span class="news-auth-name" style="color: rgb(204, 204, 204);">John Deo</span>
                  </a>
               </div>
            </div>
            <div data-title="Date" class="news-date-wrp">
            <span class="news-date" style="color: rgb(204, 204, 204);">2018-09-06</span>
            </div>
         </div>
         <div class="cont3">
            <div class="news-sum-wrp">
            <span class="news-sum" style="color: rgb(40, 40, 40);">
            २१ भदाै, काठमाडौं । विश्वकै चर्चित गायन रियालिटी शो “द भ्वाइस” को नेपाली संस्करण (फ्रेञ्चाइज) द भ्वाइस अफ नेपाल र नेपालको सबैभन्दा बढी डाउनलोड भएको जीवनशैली एप हाम्रो पात्रोबीच पहिलो सिजनको एकापसी सहक...
            </span>
            </div>
            <div class="news-btn-wrp">
            <a class="news-btn" style="text-decoration: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0); color: rgb(255, 36, 0);" href="#">Read More</a>
            </div>
         </div>
      </div>
   </div>
</div>
    1 回复  |  直到 6 年前
        1
  •  0
  •   rmn    6 年前

    这似乎是使用jQuery查找对象的一种不好的方法。理想情况下,应该对所需的项使用特定的类/id,然后使用该类/id来选择元素。如: $('.mySpecificClass')

    但是,如果出于某种原因,标记是在其他地方构建的,您仍然希望这样做。这就足够了 

    $('.item[style]').filter(function(){
    return $(this).attr('style').includes('border: none')
})

    远在天涯海角并不完美,但在你的情况下应该可以。如果您使用的是较旧的浏览器,请将includes替换为 indexOf .

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    Jason Owens  ·  我的html/javascript播放按钮无法播放嵌入的youtube视频
    1 年前
    SlickRed  ·  我无法使用JS关注HTML元素
    1 年前
    Mayron Guedes  ·  如果登录名不在本地存储中,如何重定向页面?
    1 年前
    assembler  ·  Nextjs没有处理发布请求
    1 年前
    PavelB  ·  如何使用Seleniumwebdriver和mocha只运行一个测试文件?
    1 年前
    BADRUM  ·  执行两个获取功能后,如何导航回页面?
    1 年前
    Toniq  ·  javascript为php保存多维数组
    1 年前
    Natalie Smyth  ·  隐藏类只在我试图切换的两个部分中的一个部分上工作
    1 年前
    SkyWalker  ·  在JavaScript中,合并日期-时间序列的有效算法是什么?
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号