CODEWITHSUNDEEP
javascriptjqueryhtmlwrapallnextuntil
user5885550
user5885550

Reputation:

Scanning text in between two HTML elements and wrapping them with .wrapAll() function

I am working on a forum webpage but am not allowed to edit the HTML within the web page. I want to hide text until hovered over. This is a rough example of the HTML code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>nextUntil demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<dl>
    <dd class="postprofile-info">
        <span>
            <span>
                <img src="image here">
            </span>
        </span>
        "This is the text I want to surround in a div"
        <br>
        <span class="label"></span>
        "Text from here on out can be ignored"
        <br>
    </dd>
<dl>
</body>
</html>

I know that there is .nextUntil() and .wrapAll() functions, but I just cannot get it to work properly. The other issue that I have encountered is comparing the information between the tag and the
tag to ensure that I only wrap the text I want to in a div. My goal is to wrap that text in a div so that I may give it a class and manipulate it using css.

Edit 1: The reason why I did not provide any JS is because I have only been testing fragments that utilize .nextUntil() and .wrapAll(). This is all that I have, and it is in bits and pieces:

(just testing to see if this would work:)

$( ".postprofile-info" ).nextUntil( "dt" ).css( "background-color", "red" );

(another test)

$('form > span').each(function(){
    $(this).next('p').andSelf().wrapAll('<div class="test"/>');
});

(another test)

var nodelist = document.getElementsByTagName("dd").length;
for (i = 0; i < nodelist-1; i++) {
    var TextDd = document.getElementsByTagName("dd")[i].innerHTML;
    if (TextDd === "For helping in the construction of the CGDT Forum"){
        $('form > span').each(function(){
            $(this).next('p').andSelf().wrapAll('<div class="test"/>');
        });
    }
}

Upvotes: 0

Views: 61

Answers (1)

caramba
caramba

Reputation: 22490

The thing which makes it not so easy is you are trying to wrap a text node. Which is not so simple to be found. But something like this does the trick:

$('dl > dd').each(function(index){
    var textNode = $(this).contents().get(2).nodeValue;
    console.log(textNode);
    var newHtml = $(this).html().replace(textNode,'<div class="new">'+textNode+'</div>');
    $(this).html(newHtml);
});
.new {
    border: solid 3px green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dd class="postprofile-info">
    <span>
        <span>
            <img src="image here">
        </span>
    </span>
    "This is the text I want to surround in a div"
    <br>
    <span class="label"></span>
    "Text from here on out can be ignored"
    <br>
  </dd>
</dl>

Note: This will not work if you change the markup, especially cause of .get(2) so the text node has to be exactly at that position.

Upvotes: 0

Related Questions