jquery / javascript удаляет div, если jpg не совпадает

ProgramBox

jquery / javascript удаляет div, если jpg не совпадает

Post author:admin
Запись опубликована:9 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть этот HTML-код:

 <div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://1.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://12.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://123.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://good.jpg);"></div>
    </div>
</div>

Возможно ли удалить все элементы с классом «first div», если фоновое изображение не соответствует: url(https://good.jpg); ? таким образом, окончательный ответ будет:

 <div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://good.jpg);"></div>
    </div>
</div>

Я был бы признателен за любую помощь, спасибо!

Ответ №1:

Вот РАБОЧАЯ СКРИПКА вашего примера:

 $('.first').find('.test-icon').each(function(){
    if($(this).css('background-image').indexOf("good") == -1){
      $(this).closest('.first').remove();
    }    
});

Проверьте FIDDLE, чтобы добавить несколько изображений

 $('.first').find('.test-icon').each(function(){
    if($(this).css('background-image').indexOf("good.jpg") == -1 amp;amp;
        $(this).css('background-image').indexOf("good1.jpg") == -1 amp;amp;
          $(this).css('background-image').indexOf("good2.jpg") == -1){
      console.log($(this).closest('.first').remove());
    }    
});

1. Большое вам спасибо! Это действительно работает, большое вам спасибо! В этот скрипт можно добавить несколько хороших изображений:

2. @AlexandruVorobchevici Рад, что смог помочь. Вы можете пометить ответ как выполненный для ссылки на других.

3. как я могу добавить несколько изображений в этот код? нравится good.jpg , good1.jpg , еще раз спасибо!

4. Нет, я хочу белый список для указанных изображений! что-то вроде gtrskxd.jpg , mfhdj54.jpg , andsj54k2.jpg

5. Затем вы можете просто добавить OR условие в if блок

Ответ №2:

Отфильтруйте div, содержащие содержимое, с помощью good.jpg и удалите отрицание с помощью not() и remove() :

     $('.first.div').not($('.first.div').filter(
          function(index, element)
          {
               return $(element)
                 .find(".test-icon")
                 .css('background-image').indexOf("good") >= 0
          }
    )).remove();

1. Зачем использовать not функцию, когда можно просто переключаться >= с < помощью?

2. Если это так просто, опубликуйте это как ответ и получите зеленую галочку за самый простой ответ

3. Я честно спрашивал, есть ли конкретная причина или нет, если нет, то это действительно избыточно. Вы не согласны?

Ответ №3:

 var first_div = $('div.first.div');

for (var i = 0; i < first_div.length; i  ) {
    var background_image = $(first_div[i]).find('.test-icon').css('background-image');

    if (background_image !== 'url(https://good.jpg)') {
        $(first_div[i]).remove();
    }
}

Надеюсь, это поможет!

1. Не все браузеры одинаково сериализуют правила CSS, например, ваш код будет работать в Safari, но не в chrome или FF, которые преобразуют его в 'url("https://good.jpg")'

2. @Kaiido Ты уверен? Как вы это проверили? Я просто тестирую еще раз. Это хорошо работает как в Chrome, так и в FF.

3. Я протестировал это в chrome 54, FF 50 и safari 9.1.3, все на osx, и результаты совпадают с теми, которые я вам предоставил. Вероятно, результаты даже отличаются между разными версиями одного и того же браузера и на разных платформах.

Ответ №4:

Вам нужно просмотреть все элементы .text-icon с помощью каждой функции jQuery.

 $( "div.first .text-icon" ).each(function( ) {
 if( $( this ).css('background-image')!='url(https://good.jpg)' ) {
   $( this ).remove();
 }
});

Ответ №5:

Рабочий пример использования slice для извлечения URL-адреса каждого изображения:

 $('.first').each(function(){
    var img_url = $(this).find('.test-icon').css('background-image').slice(5, -2);
    if (img_url != "https://good.jpg/"){
        $(this).remove();
    }
});

Ответ №6:

Вы могли бы добиться этого, как показано ниже:

 var bg = $('first').find('.text-icon').filter(function(bg) {
    return $(bg).css('background-image') === 'url(https://good.jpg)'; 
    //although you should use '/good.jpg') 
)};
bg.hide();

Ответ №7:

Вы можете попробовать это

 if ($('.test-icon').attr('background-image') != "https://good.jpg") {
   $('.first div').remove();
}

Если вы хотите удалить весь класс «first div»..