Создание элемента DOM с помощью jQuery

#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> , чтобы исключить проблему стилизации элемента формы:

http://jsfiddle.net/GTydh/3/

Обновленный 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 Их документация просто потрясающая.