使用 XSLT 检查子节点中是否有任何 img 标签答案

【问题标题】：Checking if child nodes has any img tag in it using XSLT使用 XSLT 检查子节点中是否有任何 img 标签
【发布时间】：2012-11-27 14:56:03
【问题描述】：

目前我正在使用 XSLT 将 QTI 转换为 XHTML。

我有一个标签，其中可能有一些 html 标签。目前在以下示例中，我正在关注 QTI xml

<?xml version="1.0" encoding="utf-8"?>
<assessmentItem xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd" identifier="choice" title="Item Title will come here" adaptive="false" timeDependent="false" xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <responseDeclaration identifier="RESPONSE" cardinality="single" baseType="identifier">
    <correctResponse>
      <value>D</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer">
    <defaultValue>
      <value>0</value>
    </defaultValue>
  </outcomeDeclaration>
  <itemBody>
    <div id="item">
      <choiceInteraction responseIdentifier="RESPONSE" shuffle="false" maxChoices="1">
        <prompt>Question text appears here?</prompt>
        <simpleChoice identifier="A">
          <img src="a.gif" height="75px" width="75px" id="img0" alt=""></img>
        </simpleChoice>
        <simpleChoice identifier="B">
          <img src="b.gif" height="75px" width="75px" id="img1" alt=""></img>
        </simpleChoice>
        <simpleChoice identifier="C">
          <img src="c.gif" height="75px" width="75px" id="img2" alt=""></img>
        </simpleChoice>
        <simpleChoice identifier="D">
          <img src="d.gif" height="75px" width="75px" id="img3" alt=""></img>
        </simpleChoice>
        <simpleChoice identifier="E">
          <img src="e.gif" height="75px" width="75px" id="img4" alt=""></img>
        </simpleChoice>
      </choiceInteraction>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>

我想检查 simpleChoice 标记是否有任何 img 标记作为子节点，然后我想将样式添加到 <div class='content'> 输出标记，如下所示，如果 simpleChoice 标记没有 img 标记作为我想要的子节点跳过样式属性到<div class='content'> 输出标签。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <div id="wrapper">
      <div id="item">
        <div id="qtn">Question text appears here?</div>
        <div id="inx">
          <div id="ih1">
            <div id="mc1">
              <label id="l1">A.</label>
              <div class="content" style='vertical-align:middle;display:inline-block'>
                <img src="a.gif" height="75px" width="75px" id="img0" alt=""/>
              </div>
            </div>
          </div>
          <div id="ih2">
            <div id="mc2">
              <label id="l2">B.</label>
              <div class="content" style='vertical-align:middle;display:inline-block'>
                <img src="b.gif" height="75px" width="75px" id="img1" alt=""/>
              </div>
            </div>
          </div>
          <div id="ih3">
            <div id="mc3">
              <label id="l3">C.</label>
              <div class="content" style='vertical-align:middle;display:inline-block'>
                <img src="c.gif" height="75px" width="75px" id="img2" alt=""/>
              </div>
            </div>
          </div>
          <div id="ih4">
            <div id="mc4">
              <label id="l4">D.</label>
              <div class="content" style='vertical-align:middle;display:inline-block'>
                <img src="d.gif" height="75px" width="75px" id="img3" alt=""/>
              </div>
            </div>
          </div>
          <div id="ih5">
            <div id="mc5">
              <label id="l5">E.</label>
              <div class="content" style='vertical-align:middle;display:inline-block'>
                <img src="e.gif" height="75px" width="75px" id="img4" alt=""/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： xml xslt

【解决方案1】：

您可以在文字结果元素中使用<xsl:attribute>，只要在添加任何子元素之前这样做，这样就可以了：

<xsl:template match="simpleChoice">
  <div class="content">
    <xsl:if test="img">
      <xsl:attribute name="style">vertical-align:middle;display:inline-block</xsl:attribute>
    </xsl:if>
    <!-- rest of the div content goes here -->
  </div>
</xsl:template>

【讨论】：

【解决方案2】：

当匹配 simpleChoice 元素时，尝试在你的 xpath 中包含一个过滤器。例如，

simpleChoice      <!-- matches a simpleChoice element -->
simpleChoice[img] <!-- matches a simpleChoice element with a child img element -->

您可以将其与模板一起使用，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" />

    <xsl:template match="/">
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            </head>
            <body>
                ((etc, etc, etc, skipping a bit here for brevity; jumping right
                into the simpleChoice items))
                <xsl:apply-templates select="//simpleChoice" />
            </body>
        </html>
    </xsl:template>

    <!-- This matches all other simpleChoice items that are not matched above. -->
    <xsl:template match="simpleChoice">
        <div class="content">
            <xsl:value-of select="@identifier" />
        </div>
    </xsl:template>

    <!-- This matches simpleChoice items with an img as a direct child -->
    <xsl:template match="simpleChoice[img]">
        <div class="content" style="your style goes here">
            <xsl:value-of select="@identifier" />
        </div>
    </xsl:template>

</xsl:stylesheet>

Live example here.

编辑

要捕获可能深深嵌套在 simpleChoice 块下的图像，您需要搜索 descendant 轴。这是一个相当简单的修改。在我的示例中，更改此行：

<xsl:template match="simpleChoice[img]">

改为：

<xsl:template match="simpleChoice[descendant::img]">

Here is an updated example。您可以阅读有关 xpath 轴的更多信息here。

【讨论】：

感谢克里斯的回复。实际上我需要检查 simpleChoice 是否有任何 img 标签节点。它不可能是其中的第一个节点。 <div id="ih3"> <div id="mc3"> <label id="l3">C.</label> <div class="content" style='vertical-align:middle;display:inline-block'> <p> Some text before image </p> <p><img src="c.gif" height="75px" width="75px" id="img2" alt=""/></p> </div> </div> </div> 在上述情况下失败。你能帮我解决这个问题吗？
没问题！正如我在编辑中指出的那样，尝试使用后代轴。如果您还有其他问题，请告诉我！