Question

下面的代码会找到一个图像（如果存在）并将其移到标题和文本上方。所以，如果标记看起来像这样：

<h2>Some fancy title</h2>
<p>Some interesting text</p>
<img src="someimage.jpg" />

甚至是这样：

<p><h2>Some fancy title</h2></p>
<img src="someimage.jpg" />
<p>Some interesting text</p>

它将重新定位元素，使其看起来像这样：

<img src="someimage.jpg" />
<h2>Some fancy title</h2>
<p>Some interesting text

现在，我正在尝试弄清楚如何重新编写代码，以便在内容中有视频时（无论帖子是否还有图片），它会将视频移到其他所有内容之上。有人可以建议或告诉我一种方法吗？

这是当前的代码，正如我现在所拥有的那样：

$j('#hp-featured-item > div[id^="post-"]').each(function() {
  if($j(this).find('embed')) {
  var id=this.id.match(/^post-([0-9]+)$/);
  var imgt = $j("img:eq(0)");
  var pt = $j("p:not(:has(img)):eq(0)");
  var hh = $j("h2:eq(0)");
  $j(this).html('');
  $j(this).append(imgt).append(hh).append(pt);
  $j(this).each(function() {
   var img = $j('img');
   $j(img).wrap($j('<a>').attr('href', '/blog/?p='+id[1]));
   var h2 = $j('h2');
   $j(h2).wrap($j('<a>').attr('href', '/blog/?p='+id[1]));
  });
  } else {
   var id=this.id.match(/^post-([0-9]+)$/);
   var imgt = $j("embed:eq(0)");
   var pt = $j("p:not(:has(embed)):eq(0)");
   var hh = $j("h2:eq(0)");
   $j(this).html('');
   $j(this).append(imgt).append(hh).append(pt);
   $j(this).each(function() {
    var img = $j('embed');
    $j(img).wrap($j('<a>').attr('href', '/blog/?p='+id[1]));
    var h2 = $j('h2');
    $j(h2).wrap($j('<a>').attr('href', '/blog/?p='+id[1]));
   });
  }
 });

Answer 1

你想要做的是使用jQuery非常简单。我整理了一个测试页面和一个建议的解决方案。在重新排列之前，请务必查看测试页的来源以查看原始HTML内容。

您可以在此处查看测试页：http://pixelgraphics.s3.amazonaws.com/stackoverflow/1744585/index.html

以下是jQuery代码的返工：

$j('#hp-featured-item > div[id^="post-"]').each(function() {
    var $div = $j(this),
        $h2  = $div.find('h2:first'),
        $obj = $div.find('object, embed, img').filter(':first'),
        id   = this.id.match(/^post-([0-9]+)$/);

    if( $obj.size() > 0){
        // Find parent
        var $par = $obj.closest('p');

        // Move to top of div
        $obj.prependTo($div);

        // Remove the now empty parent
        $par.remove();

        if( $obj.is('img')){
            // You can't wrap objects and embeds with links, so make sure we just wrap images
            $obj.wrap( $j('<a></a>').attr('href', '/blog/?p='+id[1]));
        }
    }

    // Wrap the contents of the h2, not the h2 itself, with a link
    $h2.wrapInner( $j('<a></a>').attr('href', '/blog/?p='+id[1]) );

});

除了第一个img / embed，h2和paragraph之外，你原来的代码似乎唯一没有做的就是删除所有其他内容。这使得剩下的内容就位。如果您想这样做，那么只需在结束});之前添加此行：

$div.children('p:gt(0)').remove();

jQuery - 将嵌入式视频移到顶部？

1 个答案: