#jquery #html #jquery-mobile
#jquery #HTML #jquery-mobile
Вопрос:
Я пытаюсь добавить элементы списка в неупорядоченные списки в jquery mobile, но форматирование, похоже, создано неправильно.
<ul data-role="listview" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">
Title Divider
</li>
<li>
<a href="test.html" data-transition="slide">List item 1</a>
</li>
</ul>
Скрипт:
$('ul').append('<li><a>hello</a></li>');
По какой-то причине динамически сгенерированный файл li отображается не так, как тот, который создается статически. Кто-нибудь знает, почему и как я могу сделать это таким же?
Ответ №1:
Попробуйте это:
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
Комментарии:
1. @cfarm54 Пожалуйста, проверьте это, я думаю, это может сработать. Если нет, пожалуйста, прокомментируйте меня.
2. нет, не работает. я не думаю, что вы можете просто добавить это в jquery-mobile framework. вы пробовали использовать библиотеки? jquerymobile.com
3. @cfarm54 после добавления
<li>
вам нужно вызвать$('ul').listview('refresh')
для обновления. Попробуйте это, если нет, пожалуйста, прокомментируйте меня.4. Этот код медленный, сложный, и ответ не содержит решения — комментарий содержит.
5. @naugtur Привет, друг, проявляя должное уважение к твоему комментарию, я хочу отметить, что сначала я даю решение, и оно сработало для cfarm54, хотя оно завершается комментарием. итак, почему вы проголосовали против меня?
Ответ №2:
Предоставленные ответы оказались немного сумбурными…
$('ul').append('<li><a>hello</a></li>');
все в порядке, но для этого необходимо обновить listview, поэтому все, что вам нужно, это:
$('ul').append('<li><a>hello</a></li>').listview('refresh');
Комментарии:
1. Как я ответил на свой собственный вопрос, если OP — это @cfarm54, а я @naugtur?
2. @EJP — даже если он ответил на свой собственный вопрос, это поощряемая практика на stackexchange, и его не следует за это отчитывать.
3. Я не знал, что отвечать на ваш собственный вопрос было плохо. На самом деле, я думаю, для этого есть значок.
4. @AnthonyTopper Да, рекомендуется отвечать на свой вопрос, когда вы сами найдете ответ. Это способ обмена знаниями. Некоторые люди видят в этом недобрые намерения, потому что вы получаете очки репутации как за вопрос, так и за ответ. Некоторые люди смотрят на получение репутации так, как будто это реальные деньги или что-то в этом роде. В любом случае, то, что предлагал EJP, просто неверно. Вы никогда не должны публиковать ответы на вопросы в виде комментариев только потому, что вы сами задали вопрос. Если вам нужна дополнительная информация, просмотрите meta.stackexchange.com/questions/12513 /… и ссылки там
Ответ №3:
И если вы хотите изменить атрибуты UL, возможно, вам придется вызвать .trigger(‘create’) для вложенного div. это гарантирует, что UL будет создан снова со сброшенными свойствами.
Комментарии:
1. Это тоже правильно, но гораздо более общего характера — вы можете обновить любой раздел документа с помощью этого. И есть много вопросов по SO, спрашивающих об этом 🙂
Ответ №4:
Ваш тег <a> не ссылается на веб-страницу.
попробуйте:
$('ul').append('<li><a href="test2.html ' передача данных ="слайд" /> Элемент списка 2</li>');
Комментарии:
1. 1 пропуск
href
атрибута изменяет стиль ссылки.2. @Cyber Sleuth Omega: Хорошая попытка, но это недопустимый HTML. Нет открытия <li> и закрытия </ a> . @cfarm54 исправьте их, и это должно сработать.
3. @naugtur: согласно вашему решению, «все в порядке». Решайтесь
4.
.listview('refresh')
это ответ. OP уже добавил некоторый html. атрибуты ничего не меняют
Ответ №5:
Вам нужно будет добавить класс в тег list
$('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello')) ;
jQuery mobile автоматически добавляет класс к элементам списка, который можно увидеть, если вы запустите свою страницу в Firefox и отладите ее с помощью firebug. Выберите любой класс, который был применен, и добавьте его в ваш динамически сгенерированный тег li.
Комментарии:
1. Это не очень хорошая практика. Что происходит, когда выпускается новая версия и добавляются другие классы? Вашим исходным кодом будет break. Лучшим решением всегда является использование api используемого фреймворка, в данном случае используйте jquerymobile api.