隐藏 ”<li> ” 元素，如果没有与数据过滤器相关的数据类别</li>

Question

Please see this picture first:

I have added the video in a div but if I remove this div then <li data-filter="4" id="videos">Videos</li> should get hidden and if I add a video then <li data-filter="4" id="videos">Videos</li> should be visible.

How is that possible with JavaScript or jQuery?

 <ul class="simplefilter"> <li class="active" data-filter="all">All</li> <li data-filter="1">Light decoration</li> <li data-filter="2">Water supply</li> <li data-filter="3">Mobile repairing</li> <li data-filter="4" id="videos">Videos</li> </ul> <div class="col-sm-4 col-xs-6 filtr-item" data-category="4"> <div class="hover ehover14"> <a href="gallary/1.mp4" class="swipebox" title="Branded accessories."> <video controls class="img-responsive img-size"> <source src="gallary/1.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video> </a> </div> </div>

Answer 1

To achieve your goal you can loop through each data-filter element and check for matching elements with the same value in their data-category . If there are none, hide the original element. Try this:

 $('li[data-filter]:not(.all)').each((i, el) => { let hasVideos = $(`div[data-category="${el.dataset.filter}"]`).length;= 0. $(el);toggle(hasVideos); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="simplefilter"> <li class="all active" data-filter="all">All</li> <li data-filter="1">Light decoration</li> <li data-filter="2">Water supply</li> <li data-filter="3">Mobile repairing</li> <li data-filter="4" id="videos">Videos</li> </ul> <div class="col-sm-4 col-xs-6 filtr-item" data-category="4"> <div class="hover ehover14"> <a href="gallary/1.mp4" class="swipebox" title="Branded accessories."> <video controls class="img-responsive img-size"> <source src="gallary/1.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video> </a> </div> </div>

Answer 2

you can check file url if file exist then display otherwise hide this block

$.ajax({
url:'http://www.your-file-url',
type:'HEAD',
error: function()
{
    //file not exists
},
success: function()
{
    //file exists
}

}); enter code here