Определить содержимое блока
Товарищи, добрый день. Очень мало изучаю 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, время: 04:11. |