Как загрузить html в переменую и распарсить по дивам?
Всем привет, надеюсь на помощь гуру - не получаеться разобраться самому :(
есть файлик по структуре такой:
<div id="msg_1">
<div class="time1">
12:00
</div>
<div class="time2">
13:00
</div>
<div class="msg">
Обедать
</div>
</div>
...
<div id="msg_N">
...
</div>
хочу в переменые собрать значения из этих тэгов. (могут присутсвовать стили и другие тэги) вот мой код:
function showMsg()
{
$.get('msg.txt', function(data)
{
var fileMsg1 = "";
var fileMsg2 = "";
fileMsg1 = $(data).filter('#msg_1').html();
fileMsg2 = $(fileMsg1).filter('.msg').html();
}
};
В fileMsg1 получаю содержимое дива msg_1 как и ожидаю, а вот в fileMsg2 - пусто - что я не так делаю? Еще заковырка - зарание не извесно сколько собщений, как можно сосчитать количество div id в переменной? |
упд. додумался вот так сделать:
$.get('msg.txt', function(data)
{
var fileMsg = $(data).filter('#msg_1').find('.msg').html();
var msgshowtime = $(data).filter('#msg_1').find('.time1').html();
var msghidetime = $(data).filter('#msg_1').find('.time2').html();
}
вроде хорошо получилось, а вот как можно сосчитать количество дивов определенного формата ид <div id="msg_1"></div> <div id="msg_2"></div> <div id="msg_3"></div> <div id="msg_4"></div> сосчитать = 4? ненайду никак, :( может кто что посоветует? |
$('div').length
|
или я не понял или плохо объяснил, я загружаю даные в переменную, мне нужно их обработать, обработчик уже работает, но его нужно преминить к каждому див в переменной с определным ид, сколько их будет в файле зарание не известно, вопрос как именно сосчитать не все дивы а именно секционые тоесть те у которых ид = msg_1, msg_2, msg_..., msg_N
|
var num = 0;
$('div').each(function () {
var id = $(this).attr('id');
if (id.test(/msg_/)) num++;
});
В синтаксисе test не уверен (не помню точно), но суть ясна. |
ок, спасибо, идею понял, вот только как такое применить к переменной в которой хтмл код?
|
Если этот код лежит в переменной и это строка то это ещё проще:
var str = /*Ваша строка*/;
var array = str.split('msg_');//Превращаем строку в массив, разбивая члены массивов вашим идентификатором
var num = array.length; //длинна этого массива и будет количеством дивов
|
отлично! Работает, хоть и возращает на единицу больше, но это поправимо, спасибо
|
Еще вопрос по тому же самому, а как можно разбить сообщение в массив без обрамляющего тега <div id="msg_1">? то есть чтобы элементы массива были содержание этого дива, но не он сам?
|
Тут 2 основных пути:
1) Регулярные выражения и возможно пользование split 2) Использование методов replace и split; В регулярных выражениях я не силен, можете спросить об этом в разделе "Общие вопросы javascript", там часто спрашивают про выражения. Если изберете второй путь, то почитайте про эти методы, это не сложно разобрать. Что не получится - помогу. |
выкинул этот див вобще и заменил на ":::" сплит по нему разделил что мне нужно, не совсем то что спрашивал, но цели достиг :)
|
теперь конструкция поиска контента див не работает :( как то может не так запрашиваю?
У меня элемент состоит теперь из трех дивов (контент с тегами): <div class="time1"> 12:00 </div> <div class="time2"> 13:00 </div> <div class="msg"> Обедать </div> - как можно вычленить содержимое дивов?
...
alert(MyArray[i].find('.msg').html());
несрабатывает почемуто... |
MyArray - это что?
|
это мой массив:
var MyArray = data.split(':::');
где data это переменная куда загрузил содержимое файла элемент массива это 3 дива, пытаюсь достучаться до их содержания через такую конструкцию:
$.each(MyArray, function (i, element)
{
//alert(MyArray[i].filter().find('.msgbody').html());
alert(element.find('.msg').html());
});
|
Не называйте массив с большой буквы. С большой буквы принято называть классы.
Пользуйтесь console.log для вывода отладочной информации. Попробуйте написать свою функцию в консоле. Поработайте со своей функцией. Почитайте об операциях со строками. Если элемент массива MyArray - это строка с 3-мя дивами, то методы filter, find и т. д. здесь не будут работать, так как они работают с элементами html |
Для примера несколько методов для работы со строками:
search, test, replace, split; Каждая строка в свою очередь - это массив символов, изучите методы работы с массивами. Т.е. к каждой строке мы можем обратиться методом length и получить количество символов в ней, можем обратиться к любому символу строки str[num];//где num - номер символа Все это базовые навыки работы с javascript (да и с любым другим языком программирования). Изучайте массивы и строки. |
Собственно тут есть важный вопрос. Для чего вам нужна эта строка? вы добавляете её на сайт из файла или с сайта забираете информацию?
|
ok, попробую - пока без понятия как этой консолью пользоваться :(
а насчет методов - они прекрасно работают если строка содержит html: <div id="msg_1"> <div class="time1"> 12:00 </div> <div class="time2"> 13:00 </div> <div class="msg"> Обедать </div> </div> и тогда такой код прекрасно работает, а если убрать обрамляющий див - неработает :( значит ошибка где то в синтаксе я полагаю...
$.each(myArray, function (i, element)
{
var fileMsg = $(element).filter('#msg_1').find('.msg').html();
alert(fileMsg);
});
|
Цитата:
|
Цитата:
Вопрос в том, что мне нужно переодически просматривать файл и выводить или прятать собщения из него на этой странице - для красоты я прикрутил бегущию строку и все прекрасно работает, если собщение одно, но технически их может быть и 200, но указываеться время когда собщение должно показываться и до скольки. Вот я и пытаюсь прочесть файл с собщениями и их временами и обработать, чтоб вывести в свой див только актуальное собщение, а не весь файл. Все что мне нужно - это вычленить из дивов время чтобы знать выводить или прятать собщение и собственно само собщение, которое к тому же может содержать html код типа размера букв, шрифт, цвет и т.д. - все уже работает когда собщение одно, а вот с несколькими еще нет |
а почему не положить в массив изначально при создании переменной каждый див отдельным элементом массива?
|
как раз счас над этим работаю, разобрался с консолью - действительно удобно! :) но все равно интересно если есть дивы в переменой как с ними удобно работать то...
|
Создайте асоциативный массив и работайте с ним. Например:
var messegeData = {
messeges: ['Завтракать', 'Обедать', 'Ужинать'],
timesStart: ['12:00','16:00','20:00'],
timesEnd: ['12:30','16:40','20:55']
}
|
Для такого объекта добавление сообщения на сайт будет выглядеть:
$('body').append('<div>' +messegeData.messeges[i] + '</div>');
В таком формате время через которое надо удалить сообщение можно задать сразу, при создании элемента, и вам не надо будет проверять пришло ли время его удалить. Надо будет отслеживать только момент при котором необходимо создать этот элемент. |
ну для ассоциативного массива нужно считаное распарсить, можно конечно, но как то не изящно :)
а насчет вставления я делаю так:
$('#msg').html("сообщение")
или это не правильно? див уже прописан с ид мсг |
А чем не изящно распарсить на удобные объекты? Потом ими удобно пользоваться.
|
Более того, можно сделать события создания новых сообщений, и тогда вам не надо будет проверять каждые н секунд пора ли создавть сообщение. Можно разложить сообщения на объекты и каждое сообщение само будет знать когда ему пора создаваться и когда ему надо удалиться.
|
у меня есть возможность сразу в файл формировать собщения как только может быть нужно, вот и хочеться сразу ими пользоваться, не переиначивая.
насчет проверки и событий - можно поподробнея? на данный момент я дергаю файл каждые 10секунд и проверяю содержимое - бо сообщения могут поменяться, тогда нужно пепегрузить все, еслиб удалось прикрутить евент на файл с собщениями и как то заметить что он изменился - то не нужноб было его загружать в память каждые 10сек... |
Ок, вы можете писать в html напрямую, так? Но тогда вы можете писать скрипт из своей программы! Вы же можете написать в html файл в body тег script и в него прописать объекты сообщений и времени. Например по модели описанной выше. И парсить тогда ничего не надо.
|
впринципе да, но мне это не кажеться безопасным, все это дело будет крутиться на сервере, юзер будет иметь доступ к странице, а софт генерить собщения, в строго определенное место, контролировать софт будут другие люди, не точтобы они специально вредили, но технически они смогут изменить код и тогда все пепестанет работать...
|
вообщем можно создать объект вида
var Messege = function (timeStart, timeEnd, messege) {
this.timeStart = timeStart;
this.timeEnd = timeEnd;
this.messege = messege;
this.createInit();//Запускаем инициализацию создания элемента
}
Messege.prototype.createInit = function () {
if (/*время создания уже наступило*/) {
this.createAsTime();
} else {
this.createAsTime(this.currentTimeToCreate()); //рассчитываем время до создания (в мс)
}
}
Messege.prototype.createAsTime = function (time) {
if (time != null) {
setTimeout(this.addElement, time);
} else {
/*функция создания элемента*/
}
}
Messege.prototype.addElement = function () {
$(/*место*/).append('<div>' + this.messege + '</div>');
this.$ = $(/*место*/).find('div').last();
this.removeMessegeInit();
}
Messege.prototype.removeMessegeInit = function () {
this.removeAsTime(this.currentTimeToRemove()); //рассчитываем время до удаления (в мс)
}
Messege.prototype.removeAsTime = function (time) {
setTimeout(this.remove, time);
}
Для каждого сообщения создаем экземпляр класса Messege, и у каждого будут вышеперечисленные методы. Создаем экземпляр:
var a = new Messege("10:00", "15:00", "Обед")
|
В безопасности вы ничего не теряете, ведь в странице будет только объект с данными и все (разница в том что его не надо парсить). К тому как будет создаваться этот объект пользователю доступа не будет.
С кодом приведённым выше, вам надо просто создать экземпляр для каждого сообщения с соответствующими параметрами, а сообщения будут сами создаваться и удаляться. |
С английским у меня не очень)
|
| Часовой пояс GMT +3, время: 07:34. |