时间戳

首页 > 解决方案 > Jquery 包装元素

javascript - Jquery 包装元素

问题描述

我有一些 HTML 输出需要用新的 div (.container) 包装。有时 span.diary-film-name 后面会跟一些链接 a.film-tickets-link。如果链接在那里，我希望它们也包含在 .container div 中。

让我澄清一下，我无法更改 HTML 输出，因此采用了这种方法。

我可以使用下面的行来包装 span.diary-film-name 但我不确定是否包装以下链接（如果存在）？

$( ".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>

我这样做是为了如果里面没有 .film-ticket-links ，我可以删除容器，即

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

编辑：我唯一能做到的就是在跨度之前和之后添加一个<br>。这是我可以对原始输出进行的唯一更改：

$('.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>')
})

标签： javascriptjqueryhtml

解决方案

编辑用 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-link 类的同一级别中的所有元素，然后将它们附加到容器的末尾：

 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 填充的某些数据字段）我没有“编译”它，所以也许有是一些语法错误，但逻辑没问题。

老的

如果您使用跨度容器

.diary-film-name

如果链接存在并且你用它包装它，下面的链接将在容器之外，我的建议是更改 HTML 的结构，在 .diary-film-name 顶部添加一个跨度，这将包装文件名和过滤链接

<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>" );

推荐阅读