javascript - 使用 AJAX 和 jQuery 填充 div

Question

嘿，我正在为计算科学学位做作业，我必须使用 AJAX 和 jQuery 从 rss feed .xml 文件中提取信息。

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

这是上面布局图片中显示的 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>

这是我当前从.xml中提取数据的代码，尽管它从.xml中找到所有项目，然后将所有标题附加到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>");

    });
  }

现在我确信您可以看到我想要完成的任务，但无论如何我都会解释一下。

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

谢谢，杰森!

更新:

目前: https://i.gyazo.com/2228fe9b78b5821d9f6ea137f5fac74c.png

我终于成功了!这是我使用的代码:

      $(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>");
    });
  }

Answer 1

您的思路是正确的，但您需要先解析 XML，然后才能使用 jQuery 进行查询。 https://api.jquery.com/jQuery.parseXML/

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

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);
    }
}