Добавить CSS между 2 элементами в JQuery - PullRequest
Новая
       1

Добавить CSS между 2 элементами в JQuery

0 голосов
/ 12 октября 2019 
<startline></startline>welcome to my application <b>product</b><endline></endline>

Здесь у меня есть 2 элемента: начальная и конечная. Мне нужно изменить цвет текста между этими 2 элементами. Я не могу добавить дополнительные элементы в этот блок. Это динамический контент;

Я пробовал с приведенным ниже кодом 

$(document).ready(function(){
    $("startline").nextUntil("endline").css({"color": "red", "border": "2px solid red"});
  });

Но цвета применяются только в тексте "Продукт". Мне нужно применить этот цвет во всех текстах.

Может кто-нибудь помочь решить эту проблему. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 12 октября 2019

Вы не можете раскрасить текст напрямую, поэтому его нужно вставить в другой элемент и соответственно стилизовать этот элемент

Кроме того nextUntil() не собирает текстовые узлы.

Вы можете использоватьчто-то вроде следующего, чтобы перебрать element.nextSibling и добавить к новому <div>, а затем, наконец, вставить этот новый <div>

$('startline').each(function() {
  const $div = $('<div>').css({"color": "red", "border": "2px solid red"});
  let next = this.nextSibling;
  while (next && next.tagName !== 'ENDLINE') {
    $div.append(next);
    next = this.nextSibling;
  }
  $(this).after($div)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<startline>Start</startline>welcome to my application <b>product</b><endline>End</endline>
0 голосов
/ 12 октября 2019

Рассмотрим следующее 

<body>
    <div class="startline"></div>
    Welcome to my application <b>product</b>
    <div class="endline"></div>
</body>

Что делает код jQuery, ищет элементы между начальной и конечной элементами и применяет цвет для найденных элементов.

welcome to my application с другойРука не элемент. Изменяя цвет для этого текста, вы должны либо обернуть его в элемент (span, p, div и т. Д.), Либо применить цвет к его элементу контейнера, который в данном случае является телом.

Вариант 1 : стиль текущей структуры

CSS ( BEST ) 

<style type="text/css">
    body {
        color: red;
    }
    .startline,
    .endline {
        color: initial;
    }
</style>

JavaScript 

$(document).ready(function () {
    $('body').css('color', 'red'); // set text color the entire body
    $('.startline, .endline').css('color', 'initial'); // reset the text color from startline, endline elements
});

Вариант 2 : заключить все между начальной и конечной линиями в другой элемент ( BEST ) 

<body>
    <div class="startline">startline</div>
    <div>Welcome to my application <b>product</b></div>
    <div class="endline">endline</div>
</body>

CSS ( BEST ) 

<style type="text/css">
    body *:not(.startline):not(.endline) {
        color: red;
    }
</style>

JavaScript - используйте jQuery, который вы пробовали: 

$(document).ready(function(){
    $(".startline").nextUntil(".endline").css({"color": "red", "border": "2px solid red"});
});

См. Как работает CSS для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...