Question

我有一些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();

编辑：我唯一可以做到的是在跨度之前和之后添加<< em> 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>')
})

Answer 1

编辑用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填充的具有唯一标识符的某些数据字段）我没有“编译”它，因此可能存在一些语法错误，但是逻辑还可以。

OLD

如果您使用跨度容器

.diary-film-name

如果存在链接并且将其包装，则下面的链接将位于容器外部，我的建议是，更改HTML的结构，在.diary-film-name顶部添加一个跨度，这将包装两个fil名称和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>" );

Answer 2

我设法解决了这个问题...

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

Answer 3

关于container：您可以有更多的容器，但是根据引导文档不能嵌套它们。因此，您的html结构还可以。

此外，您的源代码适合于实现您想要的结果，但是，如果您只想拥有一个container并且您不能从背面更改html结构呈现，则可以直接通过Jquery进行操作

jQuery包装元素

3 个答案: