使用AJAX和jQuery来填充div

Hey I'm working on an assignment for my degree in Computing Science, I have to make use of AJAX and jQuery to pull information from an rss feed .xml file.

嘿,我正在攻读计算机科学学位,我必须利用AJAX和jQuery从rss feed .xml文件中提取信息。

Here is my website layout: https://i.gyazo.com/023f1e02f5d310ae8e0250874b4056da.png

这是我的网站布局:https://i.gyazo.com/023f1e02f5d310ae8e0250874b4056da.png

Here is part of the html for the divs shown in the layout picture above:

以下是上面布局图中显示的div的html的一部分:

<section id="world" class="world-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>World News</h1>
                <div class="col-lg-12">
                    <div class="row">
                        <div class="news-container">
                            <h2 id="heading1">item 1 title</h2>
                            <p>
                                item 1 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                        <div class="news-container">
                            <h2>item 2 title</h2>
                            <p>
                                item 2 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                        <div class="news-container">
                            <h2>item 3 title</h2>
                            <p>
                                item 3 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="news-container">
                            <h2 id="heading1">item 4 title</h2>
                            <p>
                                item 4 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                        <div class="news-container">
                            <h2>item 5 title</h2>
                            <p>
                                item 5 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                        <div class="news-container">
                            <h2>item 6 title</h2>
                            <p>
                                item 6 description
                            </p>
                            <p>
                                <a class="btn" href="#">View full article</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

This is my current code to pull the data from the .xml, although it finds all the items from the .xml, and then appends all the titles into heading1, whereas i would like to put the first item title in heading1, and the second within heading2, etc.

这是我从.xml中提取数据的当前代码,虽然它找到.xml中的所有项目,然后将所有标题追加到heading1中,而我想将第一个项目标题放在heading1中,而第二个项目标题放在heading1中在标题2等内

      $(document).ready(function()
  {
    $.ajax({
      type: "GET",
      url: "news.xml",
      dataType: "xml",
      cache: false,
      success: parseXml
    });
  });

  function parseXml(myXml)
  {
    $(myXml).find("item").each(function()
    {
      $("#heading1").append("<p>" + $(this).find("title").text() + "</p>");

    });
  }

Now I'm sure you can see what i'm trying to accomplish, but ill explain it anyway.

现在我确定你可以看到我想要完成的任务,但无论如何都要解释它。

I want to be able to take the items from the rss feed, and place them in their own separate divs, so each div contains its own item. My problem is that im unsure how to achieve this, i hope someone can help.

我希望能够从rss feed中获取项目,并将它们放在各自独立的div中,因此每个div都包含自己的项目。我的问题是,我不确定如何实现这一点,我希望有人可以提供帮助。

Thanks, Jason!

UPDATE:

Currently: https://i.gyazo.com/2228fe9b78b5821d9f6ea137f5fac74c.png

I've got it working finally! Here is the code i used:

我终于搞定了!这是我使用的代码:

      $(document).ready(function()
  {
    $.ajax({
      type: "GET",
      url: "world-news.xml",
      dataType: "xml",
      cache: false,
      success: parseXml
    });
  });

  function parseXml(myWorldXml)
  {
    $(myWorldXml).find("item").each(function()
    {
      $("#world-news-container-row").append("<div class='news-container'>" + "<p class='news-heading'>" + "<a href='" + $(this).find("link").text() + "'>" + $(this).find("title").text() + "</a>" + "</p>" + "<p class='news-content'>" + $(this).find("description").text() + "</p>" + "</div>");
    });
  }

1 个解决方案

#1

You're on the right track, but you need to parse the XML before you can query it with jQuery. https://api.jquery.com/jQuery.parseXML/

您处于正确的轨道上,但是您需要解析XML,然后才能使用jQuery进行查询。 https://api.jquery.com/jQuery.parseXML/

You'll also want to create and append the news-container elements on the fly, adding rows as needed.

您还需要动态创建和附加新闻容器元素,并根据需要添加行。

function parseXml(myXml){
    var $parsedXml = $($.parseXML(myXml)); // jQuery object from parsed XML
    $parsedXml.find("item").each(function(index){
        // every 3rd item (including the first) create a new row
        var $row;
        if(index % 3 == 0){
            $row = $("<div class='row'></div>");
            $("#container-for-rows").append($row);
        } else {
            $row = $(".row").last();
        }

        var $newEl = $("<div class='news-container'></div>");
        $newEl.append("<p>" + $(this).find("title").text() + "</p>");
        $newEl.append("<p><a class='btn' href='#'>View Full Article</a></p>");

        $row.append($newEl);
    }
}

#1