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

Answer 2

如果你不介意首先包装你的片段，这应该可行。

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作为参数，附加很好。

Answer 3

试

码

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

样品

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

<强> DEMO

Answer 4

您需要将该文本分配给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。

Answer 5

<!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，则可以在之后修改它......

使用jQuery在Variable中处理HTML

5 个答案: