使用jQuery在段落中添加无序列表

对于客户端类，我将XHR-request/getElementById修改为jQuery-ajax-request/jQuery-document-manipulation。它应该显示来自“Rob's Rock & Roll Roll大事记”的4个项目中的一个的描述。我将3段添加到ID为“description”的输出div;描述，价格和一个或多个网址。在打开和关闭段落标签内添加说明文字和价格文字可正常工作。使用jQuery在段落中添加无序列表

***问题：我遇到的问题是，在返回的XML文档中添加2或3个url作为锚点标记链接列表项中的每个内容，全部在段落内的无序列表中。字符串显示在控制台，因为我很确定它应该，但是当我检查我得到的页面：1）p-open标签，2）p-close-tag，3）无序列表（多个元素）， 4）p-open-tag和5）p-close-tag。我不明白如何追加描述和价格段落查找，但url段添加了一个近段落标签，在我想appedn的无序列表之前，然后在我追加的有序列表后添加了一个开放段落标签。

我发现一个关于动态添加3个无序列表与jQuery的问题，但它还没有回答。

我的数据：返回一个示例XML文档是：

<item id="itemHat"> 
    <description>Michael Jackson's hat as worn in the "Billie Jean" video. Not really rock memorabilia but it smells better than Slash's tophat. 
    </description> 
    <price>1699.99</price> 
    <resources> 
    <url>http://www.michaeljackson.com/</url> 
    <url>http://music.yahoo.com/vid-2143030--Billie-Jean</url> 
    </resources> 
    </item>

这是我使用的代码：

// Add description and price to description output area. 
descriptionSring = "<p>Description: " + $(xml).find("description").text() + "</p>"; 
priceString = "<p>Price: " + $(xml).find("price").text() + "</p>"; 
$("#description").append(descriptionSring + priceString); 
// Add URL's to description output area. 
$(xml).find("resources").each(function(resoureceIndex, resourceValue) { 
    urlString = ""; 
    $(this).find("url").each(function(urlIndex, urlValue) { 
     urlString += "<li><a href='" + urlValue.textContent + "'>" + urlValue.textContent + "</a></li>"; 
    }); 
    $("#description").append("<p><ul>" + urlString + "</ul></p>"); 
    console.log(urlString); 
});

的Web页面检查器（Chrome）显示：

<div id="description"> 
    <p>Description: Michael Jackson's hat as worn in the "Billie Jean" video. Not really rock memorabilia but it smells better than Slash's tophat.</p> 
    <p>Price: 1699.99</p> 
    <p></p> 
    <ul> 
     <li><a href="http://www.michaeljackson.com/">http://www.michaeljackson.com/</a></li> 
     <li><a href="http://music.yahoo.com/vid-2143030--Billie- Jean">http://music.yahoo.com/vid-2143030--Billie-Jean</a></li> 
    </ul> 
    <p></p> 
    </div>

控制台显示urlString是（它看起来像我应该工作）： “

http://www.michaeljackson.com/ '>http://www.michaeljackson.com/

http://music.yahoo.com/vid-2143030--Billie-Jean'>http://music.yahoo.com/vid-2143030--Billie-Jean

”

来源

2016-12-02 Mike Ausloos

您可以通过按选项+ CMD + U（CTRL +在Chrome中看到实际的源代码alt + U在Windows上） - 你可以请张贴它在那里显示？ – pwagner

好的提示。我只是从Brackets复制粘贴;这应该是等同的，但可能不是。 –

我尝试的另一种方法和它似乎工作。

HTML：

<p id="desc"></p>

的JavaScript：

var $p = $("<p></p>"); 
var lis = "<li>Test</li><li>Test 2</li>"; 
var $ul = $("<ul>" + lis + "</ul>"); 
var $final = $p.append($ul); 

$("#desc").append($final);

这里是小提琴：https://jsfiddle.net/mehmetb/1qf83x1g/

来源

2016-12-02 21:32:07

谢谢@MehmetBaker！这很好。我现在看到将其分解为每个元素或一组元素，然后将其重新构建并最终分配它。我给了你一个投票，但是我缺乏网站的经验让你看到它。 –

不客气@MikeAusloos。是的，投票需要声望，但您可以接受答案作为问题的所有者。它应该位于投票箭头下作为复选标记。 –

再次感谢@MehmetBaker。我现在已经接受了答案，并且页面现在已经呈现并且应该是样式的。祝你有美好的一天！ –

使用jQuery在段落中添加无序列表

回答

相关问题