CODEWITHSUNDEEP
javascriptjqueryhtml
Mudders
Mudders

Reputation: 117

Manipulate HTML in Variable with jQuery

I have a variable which is a portion of html :

<p>this is a test</p>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<p>more content</p>
<ol>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
</ol>
<p>more content again34234</p>
<ul>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ul>
<p>&nbsp;</p>

I want to manipulate the variable to find the ul elements and add a class. Then I also want to add a class to the li elements which are within ul only (so do not add a class to the ol li elements).

My code is this but it doesn't seem to do anything:

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

console.log(itemValue);

$(itemValue).find("ul").addClass("CLASS_TEST");

console.log(itemValue);

What am I doing wrong?

Thanks.

Upvotes: 3

Views: 2669

Answers (5)

Matijs
Matijs

Reputation: 3148

If you don't mind wrapping your fragment first, this should work.

var div = $('<div/>', { html: itemValue });
div.find('ul').addClass('CLASS_TEST');
div.find('ol li').addClass('LI_CLASS_TEST'); // just the <li>s inside <ol>s

What you were trying to do was have jQuery do something with something that's just a string whereas jQuery works on jQuery objects.

The above snippet first creates a div element as a jQuery object and then appends your fragment. Append is fine taking a htmlString as an argument.

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

Use the .filter() method instead of the .find() method as the element you're searching for is a top-level element per the structure of your HTML:

Sample Output:

outerHTML: "<ul class="CLASS_TEST">
           <li>test1</li>
           <li>test2</li>
           <li>test3</li>
           </ul>"

Here is a demo; bear in mind that the output of $html is a jquery collection. To output the whole html you may want to use some trick such as $('<div/>', {html:$html}).html()

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

$html = $(itemValue);

console.log($('<div/>', {html:$html}).html());

$html.filter("ul").addClass("CLASS_TEST");

console.log($('<div/>', {html:$html}).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

NOTE:

It would be better to add the class while creating the HTML. And the following is recommended for creating new HTML:

var $html = $('<p/>', {text: 'this is a test'})
            .add( $('<ul/>').html( ...... ).append( ... ) )
            .add( ...... );

Upvotes: 2

dumle
dumle

Reputation: 69

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var html = '<p>this is a test</p>\n' + 
                '<ul>\n' + 
                '  <li>test1</li>\n' + 
                '  <li>test2</li>\n' + 
                '  <li>test3</li>\n' + 
                '</ul>\n' + 
                '<p>more content</p>\n' + 
                '<ol>\n' + 
                '  <li>number 1</li>\n' + 
                '  <li>number 2</li>\n' + 
                '  <li>number 3</li>\n' + 
                '</ol>\n' + 
                '<p>more content again34234</p>\n' + 
                '<ul>\n' + 
                '  <li>test4</li>\n' + 
                '  <li>test5</li>\n' + 
                '  <li>test6</li>\n' + 
                '</ul>\n' + 
                '<p>&nbsp;</p>';

    $("#dummy").append(html);
    console.log(html);

    $("#dummy").find("ul").addClass("CLASS_TEST");

    console.log(html);
});
</script> 
</head>
<body>
<div id="dummy"></div>
</body>
</html>

If you add it to the DOM you can then modify it afterwards...

Upvotes: 0

Steven Lacks
Steven Lacks

Reputation: 904

You need to assign that text to the DOM object. jQuery('body') should do the trick. (But really you should make a container with an ID $("#container")

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

console.log(itemValue);

// Don't do this.
$("body").html(itemValue);
$("body").find("ul").addClass("class_test");

console.log(itemValue);

See it running live: http://jsfiddle.net/snlacks/1rw1srt9/

What's happening here, is that jquery finds the DOM object, and then replaces it's HTML with your string.

Then we add the class. I changed the case, because the SNAKE_UPPER_CASE_WAS_HURTING_MY_SOUL.

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

try

code

$(itemValue).filter("ul").addClass("CLASS_TEST").find("li").addClass("LiClass");

sample

$("div").append($(itemValue).filter("ul").addClass("CLASS_TEST").find("li").addClass("active").end().end());

DEMO

Upvotes: 0

Related Questions