Add css between 2 elements in jquery

Question

<startline></startline>welcome to my application <b>product</b><endline></endline>

Here, I have 2 elements which is startline and endline. I need to change the color of the text between these 2 elements. I cannot add any additional elements in this block. This is the dynamic content;

I have tried with below code

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

But colors only applied in "Product" text. I need to apply this color in all the texts.

Could anyone help to fix this issue. Thanks in advance.

Possible duplicate of [jQuery nextUntil include text nodes](https://stackoverflow.com/questions/25873650/jquery-nextuntil-include-text-nodes) — Baro, Oct 12 '19 at 12:54
Why can't you add additional elements? Do you have access to the dynamic content creation? If so why can't you just wrap the whole text in a `` before adding it to the startline and endline, that will do the trick. Also, what it the purpose of using those 2 tags the way you are? Would it not be easier to just use one tag and put the text inside the tag?? — Studocwho, Oct 12 '19 at 13:09

charlietfl · Answer 1 · 2019-10-12T13:33:10.993

You can't color text directly so it needs to be inserted into another element and style that element accordingly

In addition nextUntil() does not collect text nodes.

You can use something like the following to iterate through element.nextSibling and append to a new <div> then finally insert that new <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>

Attila Antal · Answer 2 · 2019-10-12T13:22:08.733

Consider the following

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

What the jQuery code does, looking for elements between startline and endline element and applyies a color for the elements found.

welcome to my application on the other hand is not an element. Changing the color for this text, you must either wrap it into an element (span, p, div, etc...) or apply the color to its container element which is the body in this case.

Option 1: Style the current structure

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
});

Option 2: Wrap everything between startline and endline into another element (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 - use the jQuery you've tried:

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

See How CSS works for more information.

Add css between 2 elements in jquery

2 Answers2