Определить содержимое блока
Товарищи, добрый день. Очень мало изучаю java и jquerry, поэтому даже при решении простой (на мой взгляд) задачи испытал крайние затруднения. Очень надеюсь на вашу помощь!
Итак, дано: Два блока div с каким-то содержимым, например <div class="js-loader"> 111 </div> <div class="js-loader"> <iframe>222</iframe> // вставляется через сторонний script </div> (По сути первый блок без iframe создан для проверки работоспособности скрипта) Задача: проверять содержимое div, и, если там есть iframe, то убирать дополнительный класс, если флэйма нет (aka грузится скрипт) - то добавляем доп. класс (который рисует картинку подгрузки на время, пока скрипт не подгрузится и не появится iframe). Пока не берем тот момент, что возможно, скрипту нужно будет периодически проверять содержимое блока (чтобы на момент подгрузки скрипта повторить свой алгоритм) Что смог сделать я: <script type="text/javascript"> $(document).ready(function() { if ($('.js-loader').children("iframe")) { $('.js-loader').removeClass( "js-post-loader" ); // если iframe есть - убираем класс } else { $('.js-loader').addClass( "js-post-loader" ); // если iframe нет - добавляем класс, который в бэкграунд пропишет значек загрузки } }); </script> В чем проблема: как мне объяснили, "if" работает с булевым значением, а у меня - массив данных, поэтому "if" всегда срабатывает как true. Скорее всего скрипт должен выглядеть как-то иначе. Я буду вам ОЧЕНЬ благодарен за подсказки. Всем заранее огромное спасибо! |
Цитата:
<!DOCTYPE html> <html ng-app> <head> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="http://code.angularjs.org/1.1.4/angular.min.js"></script> <link rel='stylesheet type=text/css href=tmp.css' /> --> <style type='text/css'> .js-post-loader { border: 1px solid red; } </style> <script type='text/javascript'> $(function(){ $('.js-loader').each(function(){ if ($(this).find('iframe').length==0) { $(this).addClass('js-post-loader'); } else { $(this).removeClass('js-post-loader'); }; }); }); </script> </head> <body> <div class="js-loader"> 111 </div> <div class="js-loader"> <iframe>222</iframe> </div> </body> </html> |
Спасибо, заработало!
Стал искать, как заставить скрипт перезапускаться автоматически? Нашел вариант с return но не понял, как применять (гипер-новичек в jquerry, что сказать). По логике: если скрипт не нашел iframe то ему нужно вернуться, и повторять алгоритм до тех пор, пока не найдёт (пока фрэйм не подгрузится) . Можно поставить время перезапуска 1-3 секунды, если это имеет значение. Спасибо! |
>вернуться, и повторять алгоритм до тех пор, пока не найдёт (пока фрэйм не подгрузится)
$(function(){}) - это все что будет исполняться после загрузки документа, следовательно iframe будет на странице. Если же это означает, что необходимо выполнить нечто после загрузки документа в iframe, то нужен не таймер, а обработка его события onload. |
Цитата:
|
Часовой пояс GMT +3, время: 21:52. |