隐藏没有特定属性的DOM元素

Question

I want to hide all images which have no data-web-src attribute on 767px. I tried the following but I failed; how can I do that?

 $('#homepage-carousel .lazy_res').each(function(index, value) { var ws = $(window).width(); var large = 1024; var medium = 767; var small = 0; if (ws <= medium) { $(this).not('[data-web-src]').hide(); } else { $(this).not('[data-web-src]').show(); } }); 

 img { width: 500px; float: left; margin-right: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="homepage-carousel"> <img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" /> <img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg"> </div> 

Codepen Demo

Answer 1

This should be done with CSS Media Queries . No JavaScript required.

 /* Set page default styles and styles that should only be in effect for viewports under 767px wide here. */ img { width: 500px; float: left; margin-right: 10px; } /* Apply the following CSS only to viewports wider than 767px */ @media (min-width: 767px) { /* Select all images except those with an attribute of: dat-web-src */ img:not([data-web-src]) { display: none; /* Hide the matching elements */ } /* Make any other CSS changes you like here */ /* This class will only be applied to images when the media query is in effect. */ img.someNewClass { /* Whatever you need here */ } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="homepage-carousel"> <img class="lazy_res" src="http://localhost:82/works/anitur/img/slider/1.jpg" alt="" /> <img class="lazy_res" src="http://localhost:82/works/anitur/img/assets/mice-1.jpg"> </div> 

Answer 2

You need to set your code within a function and then it can be called onload and also onresize to test it:

see https://api.jquery.com/on/
Description: Attach an event handler function for one or more events to the selected elements.

 function testit() { $("#homepage-carousel .lazy_res").each(function(index, value) { var ws = $(window).width(); var large = 1024; var medium = 767; var small = 0; if (ws <= medium) { $(this).not('[data-web-src]').hide(); } else { $(this).not('[data-web-src]').show(); } }); } $(window).on('resize load', testit ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> below 767px wide, you'll see nothing else here :), use the full page mode to test the snippet. then resize the window <div id="homepage-carousel"> <img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" /> <img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg"> </div> 

https://codepen.io/gc-nomade/pen/EXLZEN