Question

我正在尝试使用jQuery在我的每个“部分” html标记中进行搜索，如果它在该部分中找到了“ a href”标记，则将THAT部分的全部内容包装到另一个div中。 ..

到目前为止，我已经设法使jQuery搜索每个部分，并检查a是否存在，但是我无法将其仅包含在包含链接的部分内容周围.div（）div ...这是我的代码：

它将inViewport div包裹在两个部分中（甚至是其中没有链接的部分）。

 //This is doing nothing.  If I remove .sibling('h4') so it is:

  $('section').each(function(){
           if($(this).has('a')) {
            $(this).siblings('h4').wrap('<div class="inViewport"></div>');
           }
        });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <section id="section1" class="cd-section">
           <h4>Some text here, no link!</h4>
        </section>

        <section id="section2" class="cd-section">
           <h4>
             <a href="#">A link is here!</a> So should wrap another diva round 
             it all.
            </h4>
         </section>

Answer 1

您应该结合使用jQuery .children()和.wrapAll()方法：

$('section').each(function() {
  if ($('a', this).length) {
    $(this).children().wrapAll('<div class="inViewport"></div>');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="section1" class="cd-section">
  <h4>Some text here, no link!</h4>
</section>

<section id="section2" class="cd-section">
  <h4>
    <a href="#">A link is here!</a> So should wrap another diva round it all.
  </h4>
</section>

如果section中有链接，请将其内容包装在另一个div

1 个答案: