2

私はこのhtmlを持っており、最初の画像（必ずしもツリーの最初の要素ではない）がhtmlの最初の要素として表示されるように、このhtmlを変更したいと考えています。以下はサンプルのhtmlです

<div class="parentContainer">
 <div class="content">blah...</div>
 <div class="midContent">blah...</div>
 <img src="url1"/>
 <div class="lowerMidContent">blah...</div>
 <img src="url2"/>
 <img src="url3"/>
 <div class="footerContent">blah...</div>
 <img src="url4"/>
</div>

最初の img (src=url1 を使用) がparentContainer の最初の子として表示され、残りの html がそのままになるように、この html を変換する必要があります。以下は私が必要とする出力です -

<div class="parentContainer">
 <img src="url1"/>
 <div class="content">blah...</div>
 <div class="midContent">blah...</div>     
 <div class="lowerMidContent">blah...</div>
 <img src="url2"/>
 <img src="url3"/>
 <div class="footerContent">blah...</div>
 <img src="url4"/>
</div>

これはどのように行うことができますか？XSL はこれを行うのに役立ちますか?

編集:これは純粋にXSLTを使用し、jQueryを使用しない必要があります

4

4 に答える 4

0

この完全なXSLT変換：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="node()|@*">
     <xsl:copy>
       <xsl:apply-templates select="node()|@*"/>
     </xsl:copy>
 </xsl:template>

 <xsl:template match="/*">
  <div>
   <xsl:apply-templates select="@*|img[1]"/>
   <xsl:apply-templates select="*[not(generate-id()=generate-id(img[1]))]"/>
  </div>
 </xsl:template>
</xsl:stylesheet>

提供されたXMLドキュメントに適用した場合：

<div class="parentContainer">
    <div class="content">blah...</div>
    <div class="midContent">blah...</div>
    <img src="url1"/>
    <div class="lowerMidContent">blah...</div>
    <img src="url2"/>
    <img src="url3"/>
    <div class="footerContent">blah...</div>
    <img src="url4"/>
</div>

正確に必要な正しい結果を生成します。

<div class="parentContainer">
   <img src="url1"/>
   <div class="content">blah...</div>
   <div class="midContent">blah...</div>
   <img src="url1"/>
   <div class="lowerMidContent">blah...</div>
   <img src="url2"/>
   <img src="url3"/>
   <div class="footerContent">blah...</div>
   <img src="url4"/>
</div>

説明：

  1. IDルールは、実行対象として選択されたすべてのノードを「現状のまま」コピーします。

  2. アイデンティティテンプレートの単一のオーバーライドがあります-XMLドキュメントの最上位要素に対して。要素を浅くコピーしてから、最上位の要素の属性と最初の子にテンプレートを適用しますimg。次に、テンプレートが他のすべての子要素に適用されます。

  3. 標準のXSLTgenerate-id()関数は、ノードIDを検出するために使用されます。

于 2012-10-01T12:33:16.627 に答える
0

これを試してください..jQueryの使用

$('img[src="url1"]').prependTo('.parentContainer');

クラスと要素をハードコーディングしたくない場合は、これを試すことができます..

 $('div:eq(0) > img:eq(0)').prependTo('div:eq(0)');

デモ

于 2012-10-01T07:32:53.253 に答える
0

次のようなものを試してください（jQuery）：

var $img = $('.parentContainer img').eq(0);
$('.parentContainer').prepend($img);
于 2012-10-01T07:33:59.100 に答える
0 
$('img[src=url1]').prependTo('.parentContainer')​​​​​

http://jsfiddle.net/AWp2z/

$('div').find('img:first').each(function(
    $(this).closest('div').prepend($(this))
})​​​​​
于 2012-10-01T07:28:27.400 に答える