Clever Geek Handbook

Manipulate HTML in a variable using jQuery

I have a variable that is part of the 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 a variable to find ul elements and add a class. Then I also want to add a class to the li elements that are only inside the ul (so don't add the class to the ol li elements).

My code is this, but it doesn't 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?

Thank.

+3


source to share


5 answers


Use method .filter()

instead of method .find()

as the element you're looking for is the top-level element for the structure of your HTML:

Output result:

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

Here's a demo; remember the output $html

is a jquery collection. To output all html you can use some trick like$('<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>
Run codeHide result


Note

It would be better to add a class when generating HTML. The following is recommended for generating new HTML:

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


source


If you don't mind packaging your snippet at 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 is jQuery to do something with something that is just a string, whereas jQuery works with jQuery objects.

The above snippet first creates a div element as a jQuery object and then adds the snippet. Append takes htmlString as an argument just fine.

0


source


try

code

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

Example

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

DEMO

0


source


You need to assign this text to the DOM object. jQuery ('body') should do the trick. (But actually you should make a container with 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 how it works live: http://jsfiddle.net/snlacks/1rw1srt9/

What's going on here is that jquery finds the DOM object and then replaces it with HTML with its string.

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

0


source 


<!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 modify it afterwards ...

0


source






More articles:


All Articles