Question

我有html string（js string），如下所示

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
<li>testing4</li>
<li>testing5</li>
<li>testing6</li>
</ol>

我只需要2到3个列表项，并丢弃其余的项目（如下所示）

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
</ol>

知道怎么做吗？我可以使用jQuery返回ol的子集吗？还是有正则表达式？

修改

非常感谢您的回答。我有一个子问题（对不起，我应该用原始问题问过这个问题）

我想限制对应于测试类的li（并且不考虑testClass2下的li用于删除）。

<ol class="testClass">
<li>test1</li>
<li>testing2</li>
<li>testing3</li>
<ul class="testClass2">    
 <li>testing4</li>
<li>testing5</li>
</ul>
<li>testing6</li>

</ol>

我试过像

这样的东西

html.not('.testClass2').find("li:gt(3)").remove();

但它还在考虑内在元素

这似乎有效：

html.find("ol>li:gt(4)").remove();

Answer 1

您可以简单地将它们转换为DOM元素，并使用普通选择器。

听起来你只想附加前3个li元素，所以只需抓住ul的子元素，然后在追加到页面之前对前3个进行切片。

$(my_string).children("li").slice(0, 3).appendTo("#target");

Answer 2

另一种jQuery方式：

<div id="demo"></div>

var html = $('<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>');
html.find("li:gt(2)").remove();
$("#demo").append(html);

Answer 3

如果你真的有一个字符串并且想要使用jQuery，那么你可以解析它，然后找到索引大于2的所有元素并删除它们：

var $html = $('<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>');

$html.find('li:gt(2)').remove();

$('<div>').append($html.clone()).html(); // This returns the new HTML code.

$('#wrapper').append($html); // This would append it to a #wrapper element.

Answer 4

没有jQuery

var str = '<ol class="testClass"><li>test1</li><li>testing2</li><li>testing3</li><li>testing4</li><li>testing5</li><li>testing6</li></ol>',
    // Maximum number of <li>s you want to keep
    max = 2,
    temp = document.createElement('div'),
    res = '';

// Put the string in a temporary DOM
temp.innerHTML = str;
// Find <li>s
var lis = temp.getElementsByTagName('li');
for(var i = 0, l=lis.length; i<l && i<max; i++){
    // Append them to a string
    res += lis[i].outerHTML;
}
// Empty the list and insert the ones you kept
temp.childNodes[0].innerHTML = res;

document.body.innerHTML = temp.innerHTML;

Answer 5

这是一个小提琴，演示了Lye Fish的答案：

https://jsfiddle.net/BenjaminRay/qbj50dms/

HTML：

<ol id="target">
</ol>

Javascript（使用jQuery）：

var str = "<ol class=\"testClass\">" + 
"<li>test1</li>" +
"<li>testing2</li>" +
"<li>testing3</li>" +
"<li>testing4</li>" +
"<li>testing5</li>" +
"<li>testing6</li>" +
"</ol>";

$(str).children("li").slice(0, 3).appendTo("#target");

如何从html中提取一些<li>（在ol / ul标签下）标签</li>

5 个答案:

没有jQuery