javascript - 如何使用 jQuery 获取没有边框的元素对象？

Question

我有以下标记，我需要在其中获取没有边框的元素。我有一个 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" 的内联 css是动态生成的，不可能找到样式属性。那么，我该如何解决这个问题，即如何获得那些没有边框的元素。

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="/image/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="/image/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>

Answer 1

这似乎是一种使用 jQuery 查找对象的糟糕方法。理想情况下，您应该在所需的元素上使用特定的类/ID，然后使用它来选择元素。例如:$('.mySpecificClass')。

但是，如果出于某种原因，标记是在其他地方构建的，而您仍然想这样做。这应该足够了

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

远距离并不完美，但应该适合您的情况。如果您使用的是旧版浏览器，请将包含替换为 indexOf .