使用 jQuery 在变量中操作 HTML

Manipulate HTML in Variable with jQuery

本文关键字：操作 HTML 变量 jQuery 使用      更新时间：2023-09-26

我有一个变量，它是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>

我想操作变量以查找 ul 元素并添加一个类。然后我还想向仅在 ul 内的 li 元素添加一个类(所以不要向 ol li 元素添加一个类(。

我的代码是这样的，但它似乎什么也没做：

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

我做错了什么？

谢谢。

使用 .filter() 方法而不是 .find() 方法，因为您要搜索的元素是 HTML 结构中的顶级元素：

示例输出： 

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

这是一个演示;请记住，$html的输出是一个jquery集合。要输出整个html，您可能需要使用一些技巧，例如$('<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>

注：

最好在创建 HTML 时添加类。建议使用以下方法来创建新的 HTML：

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

试试

法典

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

样本

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

演示

您需要将该文本分配给 DOM 对象。 jQuery('body'( 应该可以解决问题。(但实际上你应该创建一个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);

观看它实时运行：http://jsfiddle.net/snlacks/1rw1srt9/

这里发生的事情是，jquery找到DOM对象，然后用你的字符串替换它的HTML。

然后我们添加类。 我改变了案例，因为SNAKE_UPPER_CASE_WAS_HURTING_MY_SOUL。

<!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>

如果您将其添加到 DOM，则可以在之后对其进行修改...

如果您不介意先包装片段，这应该可以工作。

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

你试图做的是让jQuery对只是一个字符串的东西做一些事情，而jQuery在jQuery对象上工作。

上面的代码片段首先创建一个div 元素作为 jQuery 对象，然后附加您的片段。追加可以接受 htmlString 作为参数。

相关文章：