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

Answer 1

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

但是，如果由于某种原因，标记在其他位置构建，而您仍然想要这样做。这应该足够

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

在很长一段距离上并不完美，但应该适合您的情况。如果您使用的是旧版浏览器，请用indexOf替换includes。

如何使用jQuery获取边界不存在的元素对象？

1 个答案: