XML jQuery 快捷方式答案

【问题标题】：XML jQuery shortcutsXML jQuery 快捷方式
【发布时间】：2010-04-26 17:01:22
【问题描述】：

我正在编写一些代码，将我的站点导航附加到额外的 ul 中，以描述该链接将您带到哪里。我需要使用我们的 CMS 内置的导航结构，因此通过 jQuery 追加是最好的解决方案，而 XML 使数据更易于管理。我的问题是：有没有更有效的方法来写出 js？我到目前为止是这样的：

$(document).ready(function()
{
 $.ajax({
  type: "GET",
  url: "/js/sitenav.xml",
  dataType: "xml",
  success: function  parseXml(xml) {
  // WORK
   $(xml).find("CaseStudies").each(function()
    {
     $("li#case_studies").append('<ul><li>' + $(this).find("NavImage").text() + $(this).find("NavHeader").text() + $(this).find("NavDescription").text() + $(this).find("NavLink").text()  + "</li></ul>");
    });
   };
 });
});

xml 结构类似于：

<SiteNav>
 <Work>
        <CaseStudies>
            <NavImage></NavImage>
         <NavHeader></NavHeader>
         <NavDescription></NavDescription>
         <NavLink></NavLink>
        </CaseStudies>
    </Work>
</SiteNav>

我对我的 xml 结构很满意，但是有没有更紧凑/高效的方法来编写 jQuery 的代码？导航中的每个 li 都有一个唯一的 id，以防万一……

【问题讨论】：

标签： jquery xml navigation

【解决方案1】：

由于您只是按照在 xml 文档中出现的顺序添加文本，因此您可以这样做：

var cs = $("li#case_studies"); //Cache the <li> reference
$(xml).find("CaseStudies").each(function() {
  cs.append('<ul><li>' + $(this).children().text() + "</li></ul>");
});

这会缓存对li#case_studies 的引用，这样您就不会在每次找到它时都遍历 DOM。此外，您在循环中执行了 1/4 的 XML 遍历，因为您只查看子集合一次而不是 4 次查找。

这仅作为一种优化，只要 XML 中元素的顺序与您想要的顺序相匹配，从您的问题来看，请注意这一点，以防万一发生变化。

You can see an example of the code above working here.

【讨论】：