使用jQuery的目标div和以前的标题

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选择器，因为在第一个图库中，它会选择标题为“SomeSub-节”。我还添加了.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");

重要的是要注意，如果您只有封闭标签和图库之间的标题，此解决方案才能工作。