代码之家 › 专栏 › 技术社区 › nickf

使用jquery将文本和元素换行到另一个元素中

dom jquery javascript

nickf · 技术社区 · 15 年前

我有一个页面基本上是这样的:

<div id="foo">
    <a>One</a>, <a>Two</a>, <a>Three</a>, <a>Four</a>
</div>

_{为了简洁起见删除了额外的属性。}

分区中可以有任意数量的链接。我要做的是在 n ^钍一个并添加一个“显示其余”链接。基本上,为了实现这一点(据我所见),我需要能够将其转换为如下所示:

<div id="foo">
    <a>One</a>, <a>Two</a>, <a>More...</a>
    <span style="display: none"><a>Three</a>, <a>Four</a></span>
</div>

如何将链接包装在另一个元素中?

注意显而易见的方法( $('#foo a:gt(1)').wrapAll('<span>') )在这里不起作用,因为每个链接之间都有文本节点(逗号),并且该查询没有选择这些节点。

2 回复 | 直到 15 年前

Nick Craver 15 年前

尝试此操作,根据 2n 由于每个文本节点现在也算作一个:

$(function() {
  var n = 4;
  $('#foo').contents()
    .filter(function(index){ 
         return index > n && ((this.nodeType==3)||(this.nodeName=="A"))})
    .wrapAll('<span style="background: red;">');
});

Donny Kurnia 15 年前

首先,也许您应该重写元素如下:

<div id="foo">
  <span><a>One</a></span>
  <span>, <a>Two</a></span>
  <span>, <a>Three</a></span>
  <span>, <a>Four</a></span>
</div>

然后你可以很容易地显示或隐藏任何 foo 你想要的孩子 :gt 过滤器。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前