javascript - 使用 jQuery 操作变量中的 HTML

Question

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

我做错了什么？

谢谢。

Answer 1

使用 .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( ...... );