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

Jquery包装元素

jquery

ultrarun · 技术社区 · 5 年前

我有一些HTML输出需要用一个新的div(.container)包装。有时span.日记-电影名称后面会有一些链接。如果链接在那里,我想他们包装在.container div太。

让我澄清一下,我不能更改HTML输出,因此采用这种方法。

我可以把这个包起来span.日记-电影名称使用下面的行,但我不确定是否包装以下链接如果存在?

$( ".diary-film-name" ).wrap( "<div class='container'></div>" );

这就是我所拥有的:

<span class="diary-film-name">
    <a href="#">Toy Story 1</a>
</span>
<a class="film-tickets-link" href="#">5.20pm</a>
<a class="film-tickets-link" href="#">7.40pm</a>

<span class="diary-film-name">
    <a href="#">Toy Story 2</a>
</span>

这是我想用新的.container div显示的内容:

<div class="container">
    <span class="diary-film-name">
        <a href="#">Toy Story 1</a>
    </span>
    <a class="film-tickets-link" href="#">5.20pm</a>
    <a class="film-tickets-link" href="#">7.40pm</a>
</div>

<div class="container">
    <span class="diary-film-name">
        <a href="#">Toy Story 2</a>
    </span>
</div>

我这样做是为了我可以删除容器,如果没有。电影票链接内,即。

$('.container').not(':has(.film-tickets-link)').remove();

编辑: 比尔 >跨度前后。这是我在原始输出中唯一能做的更改:

$('.my-page br').each(function(){
 $(this).nextUntil('.my-page br').wrapAll(document.createElement('div'));
});

我已经设法解决了这个问题。。。

$(".diary-film-name").each(function(){
$(this).nextUntil(".diary-film-name").andSelf().wrapAll('<div class="container">  </div>')
})

0 回复 | 直到 5 年前

Josep Vidal 5 年前

编辑用each()编辑

正如您所说的HTML不能编辑,我将添加一个纯jquery解决方案: 首先,按你所做的去做,这将创建这个结构:

  <div class="container">
     <span class="diary-film-name">
         <a href="#">Toy Story 1</a>
     </span>
  </div>
  <a class="film-tickets-link" href="#">5.20pm</a>
  <a class="film-tickets-link" href="#">7.40pm</a>

因此,我们包装容器,然后选择与.film tickets链接类处于同一级别的所有元素,然后将它们附加到容器的末尾:

 var containers = $( ".diary-film-name" ).wrap( "<div class='container'></div>" ).parent();
 containers.each(function(index, element){

  const links = $(this).nextUntil('.container');
  links.appendTo(element);

})

这里的问题是容器类,它必须是唯一的(如果不是,它将不起作用,您可以使用id或从具有唯一标识符的api填充的某些数据字段) 我没有“编译”它,所以可能有一些语法错误,但逻辑是好的。

旧的

如果使用span容器

.diary-film-name

如果链接存在,你包装它,下面的链接将在容器之外,我的建议,改变HTML的结构,在.diary film name顶部添加一个span,它将包装fil name和fil链接

<div class="container">
 <span class="content-container">
    <span class="diary-film-name">
        <a href="#">Toy Story 1</a>
    </span>
    <a class="film-tickets-link" href="#">5.20pm</a>
    <a class="film-tickets-link" href="#">7.40pm</a>
 </span>
</div>

而不是

$( ".diary-film-name" ).wrap( "<div class='container'></div>" );

$( ".content-container" ).wrap( "<div class='container'></div>" );

ultrarun 5 年前

我已经设法解决了这个问题。。。

$(".diary-film-name").each(function(){
$(this).nextUntil(".diary-film-name").andSelf().wrapAll('<div class="container">  </div>')
})

-4

Wolfetto 5 年前

尊重 container

此外,您的源代码适合实现您想要的结果,但是,如果您只想有一个 容器 而且您不能从后面更改html结构呈现,您可以直接通过Jquery来完成。