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>

我希望这个 html 以这样的方式进行转换，即第一个 img（带有 src=url1）作为 parentContainer 的第一个子项出现，而 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

试试这个.. 使用 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

这个完整的 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. 身份规则“按原样”复制选择执行它的每个节点。

  2. 有一个标识模板的覆盖——用于 XML 文档的顶部元素。它浅拷贝元素，然后在顶部元素属性和第一img个子元素上应用模板。然后将模板应用于所有其他子元素。

  3. 标准 XSLTgenerate-id()函数用于检测节点身份。

于 2012-10-01T12:33:16.627 回答
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 回答