Javascript 使用AJAX和jQuery填充div

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

以下是我的网站布局：

下面是上面布局图中所示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>

世界新闻
项目1标题

项目1说明



项目2标题

项目2说明



项目3标题

项目3说明



项目4标题

项目4说明



项目5标题

项目5说明



项目6标题

项目6说明

这是我当前从.xml中提取数据的代码，尽管它从.xml中查找所有项目，然后将所有标题附加到heading1中，而我希望将第一个项目标题放在heading1中，第二个项目标题放在heading2中，以此类推

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

    });
  }

$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“news.xml”，
数据类型：“xml”，
cache:false，
成功：parseXml
});
});
函数parseXml（myXml）
{
$（myXml）.find（“item”）.each（function（）
{
$（“#标题1”）.append（“”+$（this.find（“title”）.text（）+”
”）；
});
}

现在我肯定你能看到我在努力完成什么，但无论如何我会解释的

我希望能够从rss提要中获取项目，并将它们放在各自的div中，这样每个div都包含自己的项目。我的问题是，我不知道如何实现这一点，我希望有人能帮助

谢谢你，杰森

更新：

目前：

我终于成功了！以下是我使用的代码：

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

$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“world news.xml”，
数据类型：“xml”，
cache:false，
成功：parseXml
});
});
函数parseXml（myWorldXml）
{
$（myWorldXml）.find（“项”）.each（函数（）
{
$（“#世界新闻容器行”）.append（“+”
“+”
“+”
“+$（此）。查找（“说明”）.text（）+”
“+”）；
});
}

您的思路是正确的，但是需要先解析XML，然后才能使用jQuery进行查询

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

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

函数解析XML（myXml）{
var$parsedXml=$（$.parseXML（myXml））；//解析XML中的jQuery对象
$parsedXml.find（“项”）。每个函数（索引）{
//每三个项目（包括第一个）创建一个新行
var$行；
如果（索引%3==0）{
$row=$（“”）；
$（“#行容器”）.append（$row）；
}否则{
$row=$（“.row”）.last（）；
}
变量$newEl=$（“”）；
$newEl.append（“”+$（this）.find（“title”）.text（）+“
”）；
$newEl.append（“
”）；
$row.append（$newEl）；
}
}

您的思路是正确的，但是需要先解析XML，然后才能使用jQuery进行查询

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

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

函数解析XML（myXml）{
var$parsedXml=$（$.parseXML（myXml））；//解析XML中的jQuery对象
$parsedXml.find（“项”）。每个函数（索引）{
//每三个项目（包括第一个）创建一个新行
var$行；
如果（索引%3==0）{
$row=$（“”）；
$（“#行容器”）.append（$row）；
}否则{
$row=$（“.row”）.last（）；
}
变量$newEl=$（“”）；
$newEl.append（“”+$（this）.find（“title”）.text（）+“
”）；
$newEl.append（“
”）；
$row.append（$newEl）；
}
}

那么问题出在哪里？您做了什么来调试它？您的开发人员工具（在网络和控制台选项卡中）显示了什么？为什么您的ajax选项中没有错误函数？乍一看，我猜在

myXml

上选择jQuery是行不通的，因为它可能不是jQuery能够解析的格式。我在最后几行中解释了这个问题。在.xml中，有多个项，每个项都包含自己的内容标题，描述，链接等，我想把所有的