#javascript #jquery #dom
#javascript #jquery #dom
Вопрос:
У меня есть функция
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
$("#lstCodelist option").each(function () {
var sp = $(this).text();
var sp1 = sp.split(' ');
$.each(sp1, function (i, l) {
if (l == htext) {
var boldText = "<div style="background-color: yellow; display: inline; font-weight: bold;">" htext "</div>";
$(document).append(boldText);
}
});
});
});
});
Я обновил код, но безуспешно.
Здесь, в этом коде, мне нужно создать элемент l has DOM, чтобы применить к нему желтый цвет.
пожалуйста, кто-нибудь может помочь мне, как создать элемент dom.
Спасибо
Комментарии:
1. sp1 — это просто переменная, я просто разделяю значение sp. Я получаю некоторую строку, например: «Я люблю jquery» sp1 — это я, люблю, jquery.
2. вы не можете применять css к отдельным словам….
3. Вы пытаетесь выделить некоторые слова, но простой текст не может иметь стили CSS. Вам нужно будет ставить a
<span>
вокруг каждого слова, и для этого этот пост на форуме jQuery может помочь.
Ответ №1:
Я не понял, где l
находится в вашем текущем коде. В любом случае, вы можете создать элемент DOM с помощью jQuery следующим образом: var myel = $('<div class="someclass"></div>')
. Затем вы можете добавлять myel
в любое место в DOM, используя такие функции, как .appendTo()
, .after()
, и т.д.
Редактировать
Кажется, вы пытаетесь выделить некоторые слова внутри <option>
элемента. У меня есть сомнения, будет ли это работать во всех браузерах, поскольку элементы формы немного сложны, когда дело доходит до CSS. Вы можете попробовать что-то вроде этого (непроверенный):
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
$("#lstCodelist option").each(function () {
var sp = $(this).text();
var re = new RegExp("\b" htext "\b")
sp = sp.replace(re, '<span class="highlighted">$1</span>', "gi");
$(this).html(sp);
});
});
});
Вам также понадобится некоторый CSS на вашей странице, определяющий стиль для .highlighted
ОБНОВЛЕНИЕ ПОСЛЕ ЧАТА
Я получил что-то работающее, используя <p>
вместо <option>
, чтобы исключить проблему стилизации элемента формы:
Обновленный js (в случае удаления скрипки):
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
//$("#lstCodelist option").each(function () {
$("p").each(function () {
var sp = $(this).text();
var re = new RegExp("\b(" htext ")\b")
var sOpen = "<span class='highlight'>";
var sClose = "</span>";
var newhtml = sp.replace(re, sOpen "$1" sClose, "gi");
$(this).html(newhtml);
});
});
});
Комментарии:
1. Спасибо bfavaretto, здесь в каждом цикле я получаю l $.each(sp1, function (i, l) { if (l == htext) { $(l).css(‘color’, ‘yellow’); } });
2. Да, но them
l
— это слово изsp
массива, верно? Вы должны обернуть это слово в span или что-то в этом роде, чтобы вы могли применить css.3. Пожалуйста, не могли бы вы обновить мой код bfavaretto. Я немного запутался здесь.
4. Обновил мой ответ другим решением.
5. В моем регулярном выражении возникла проблема с экранированием, можете ли вы попробовать еще раз. Кроме того, вы понимаете, как работает мое решение? Пожалуйста, попытайтесь понять метод, который я предлагаю, это в основном замена строки.
Ответ №2:
Что-то вроде этого?
$(document).append($('<div />').css('color', 'yellow'));
Это добавит к документу новый div желтого цвета. Если вам нужно добавить его к определенному элементу, просто используйте $('#myselector')
вместо $(document)
Ответ №3:
Это довольно просто
var newEl = $('<div THE_ATTRIBUTES_YOU_WANT></div>');
$('THE_ELEMENT_YOU_WANT_TO_APPEND_OR_ADD').append(newEl);
Комментарии:
1. Или просто добавьте атрибуты, подобные post перед моим =)
2. Я тоже могу добавить отдельную работу, верно? как и в моем коде, мне нужно добавить l.
3.Вы можете добавлять или добавлять много элементов, если хотите. Мой английский немного плох, чтобы пытаться объяснить это =) Я оставлю вам ссылки, которые мне помогли =) api.jquery.com/prepend api.jquery.com/append Их документация просто потрясающая.