Question

我有这样的HTML结构，并希望将所有图片库与相应的标题和副标题一起移动到不同的位置.image_content

<h2>Some section</h2>
<p></p>
<p></p>
<p></p>

<h2>Some other section</h2>
<h3>Some sub-section</h3>
<p></p>
<p></p>
<p></p>

<h2>Planos</h2>
<div id='gallery-4' class='gallery'>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
</div>

<h2>Fotos</h2>
<h3>Fotos archivo</h3>
<div id='gallery-5' class='gallery'>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
    <dl class='gallery-item'></dl>
</div>

到目前为止，我已经有了这个代码来移动画廊：

$('.gallery').appendTo('.image_content');

但是我没有获得相应的H2和H3冠军。我试过这个，但它不起作用：

$('.gallery').prev('h2').appendTo('.image_content'); 
$('.gallery').appendTo('.image_content');

这是预期的结果（image_content已经存在于代码的另一部分中）：

<div class="image_content">
    <h2>Planos</h2>
    <div id='gallery-4' class='gallery'>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
    </div>

    <h2>Fotos</h2>
    <h3>Fotos archivo</h3>
    <div id='gallery-5' class='gallery'>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
        <dl class='gallery-item'></dl>
    </div>
</div>

Answer 1

.prev()仅选择前一个元素。因此，在第二个图库中，它会尝试选择h2，但不会，因为它是h3。您可以将.prevAll()与:first结合使用来选择找到的第一个元素，因为.prevAll()会选择指定选择器的所有先前兄弟元素。我没有将.prevAll()用于h3选择器，因为在第一个库中它会选择标题“Some sub-section”。我还添加了.each（）来遍历每个库，因此您可以添加条件语句以使用不同的选择器方法。

它不是世界上最好的代码，但它应该适合您的目的，或者至少是一个很好的起点。

$(document).ready(function(){
  $('.gallery').each(function() {
    $(this).prevAll('h2:first').appendTo('.image_content');
    $(this).prev('h3').appendTo('.image_content');
    $(this).appendTo('.image_content');
  });
});

	<h2>Some section</h2>
<p></p>
<p></p>
<p></p>

<h2>Some other section</h2>
<h3>Some sub-section</h3>
<p></p>
<p></p>
<p></p>

<h2>Planos</h2>
<div id='gallery-4' class='gallery'>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
</div>

<h2>Fotos</h2>
<h3>Fotos archivo</h3>
<div id='gallery-5' class='gallery'>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
  <dl class='gallery-item'></dl>
</div>

<div class="image_content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

编辑：如果您无法为每个图库和标题添加包装，那么下面的代码可以在您描述的情况下工作。我添加了几个条件语句来检查先前的h2或h3是否存在，如果不存在则使用.prev().prev('h2')和.prev().prev('h3')。这将选择一个兄弟元素2步。

$(document).ready(function(){
  $('.gallery').each(function() {
    var prevH2 = $(this).prev('h2');
    var prevH3 = $(this).prev('h3');
    if(prevH2.length == 0) {
      prevH2 = $(this).prev().prev('h2');
    }
    if(prevH3.length == 0) {
      prevH3 = $(this).prev().prev('h3').appendTo('.image_content');
    }
    prevH2.appendTo('.image_content')
    prevH3.appendTo('.image_content')
    $(this).appendTo('.image_content');
  });
});

<h2>Some section</h2>
<p></p>
<p></p>
<p></p>

<h2>Some other section</h2>
<h3>Some sub-section</h3>
<p></p>
<p></p>
<p></p>

<h2>Planos</h2>
<div id='gallery-4' class='gallery'>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
</div>

<h2>Fotos</h2>
<h3>Fotos archivo</h3>
<div id='gallery-5' class='gallery'>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
</div>

<h3>Fotos archivo</h3>
<div id='gallery-5' class='gallery'>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
	<dl class='gallery-item'></dl>
</div>

<div class="image_content"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Answer 2

如果您可以更改html结构，还可以向图库添加封闭标记：

<h2>Some section</h2>
<p></p>
<p></p>
<p></p>

<h2>Some other section</h2>
<h3>Some sub-section</h3>
<p></p>
<p></p>
<p></p>
<div>
  <h2>Planos</h2>
  <div id='gallery-4' class='gallery'>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
  </div>
</div>

<div>
  <h2>Fotos</h2>
  <h3>Fotos archivo</h3>
  <div id='gallery-5' class='gallery'>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
      <dl class='gallery-item'></dl>
  </div>
</div>

这简化了您的添加：

$(".gallery").parent().children().appendTo(".image_content");

重要的是要注意，如果您只有封闭标签和图库之间的标题，此解决方案可以使用

使用jQuery定位div和以前的标题

2 个答案: