jQuery - перемещать встроенное видео наверх?

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 и параграфа. Это оставляет остальное содержимое на месте. Если вы хотите это сделать, просто добавьте эту строку перед закрытием });:

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