HTML

Question

我正在尝试解析xml，然后按照xml将值按顺序放入4个div中。在这些div中，要更改的第一个值是<a href>秒在锚<img src>内，第三个也在锚<h2>TITLE</h2>内。

我成功地通过以下方式更改了值：首先是第一个出现的div ...然后我尝试了如何更改剩余的3个div的内容..我当前的代码仅基于3个div仅用于演示目的......

我的代码如下：

HTML

<div class="h"> <a class="anchor" data-prd_id="1a" href="#">
<div class="image"> <img class="image-first" src="image_" alt="">
<div class="meta"> 
<h2 class="title">Dynamically_loaded</h2> 
<span class="arrow"></span> </div> 
</div>                       
</a> </div>


<div class="h"> <a class="anchor" data-prd_id="1b" href="#">
<div class="image"> <img class="image-first" src="image_" alt="">
<div class="meta"> 
<h2 class="title">Dynamically_loaded</h2> 
<span class="arrow"></span> </div> 
</div>                       
</a> </div>


<div class="h"> <a class="anchor" data-prd_id="2a" href="#">
<div class="image"> <img class="image" src="image_" alt="">
<div class="meta"> 
<h2 class="title">Dynamically_loaded</h2> 
<span class="arrow"></span> </div> 
</div>                       
</a> </div>

JAVASCRIPT

<script>
window.onload = function()
    {   
    function item_code(j){
      fValue =  $('a.anchor:lt(' + j + ')').attr("data-prd_id");
    return fValue; 
    }

 $.ajax({
    url: 'demo_xml_parser.xml', // name of file you want to parse
    dataType: "xml",
    success: function parse(xmlResponse){


 $(xmlResponse).find("item").each(function() {
  var pr_id = $(this).find("p_id").text();

  for (int i=1;i<=3;i++;){
  var id_selector = item_code(i);
  if(pr_id == id_selector) {
  var p_title = $(this).find("product_title").text();
  var p_category = $(this).find("product_category").text();
  var p_code = $(this).find("product_code").text();
  var p_img = $(this).find("product_img").text();
  var p_url = $(this).find("product_url").text();



      $('a.anchor:lt(' + i + ')').attr('href', p_url);
      $('a.anchor:lt(' + i + ' img').attr('src', p_img);
      $('a.anchor:lt(' + i + ' h2').text(p_title);
      alert("XML ID: " + pr_id + " Title: " + p_title + "Category: " + p_category + " CODE: " + p_code + "IMG: " + p_img + " URL: " + p_url);
      }
      }

    });




},  
    error: function(){alert("Error: Something went wrong");}

  });

};
</script>

XML：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <item>
        <p_id>1a</p_id>
        <product_title>Vitamin A</product_title>
        <product_category>Chemical</product_category>
        <product_code>ABCD</product_code>
        <product_img>img_10_vitamin_a.png</product_img>
        <product_url>10_vitamin_a.html</product_url>
    </item>
    <item>
        <p_id>1b</p_id>
        <product_title>Vitamin B</product_title>
        <product_category>Plants</product_category>
        <product_code>ASDF, 8820, 3423</product_code>
        <product_img>img_10_vitamin_b.png</product_img>
        <product_url>10_vitamin_b.html</product_url>
    </item>
    <item>
        <p_id>2a</p_id>
        <product_title>Vitamin C</product_title>
        <product_category>Chemical</product_category>
        <product_code>4503, 1111</product_code>
        <product_img>img_10_vitamin_c.png</product_img>
        <product_url>10_vitamin_c.html</product_url>
    </item>
    </items>

简单易用的XML如下：

var xml="<items><item><p_id>1a</p_id><product_title>Vitamin A</product_title><product_category>Chemical</product_category><product_code>ABCD</product_code><product_img>img_10_vitamin_a.png</product_img><product_url>10_vitamin_a.html</product_url></item><item><p_id>1b</p_id><product_title>Vitamin B</product_title><product_category>Plants</product_category><product_code>ASDF, 8820, 3423</product_code><product_img>img_10_vitamin_b.png</product_img><product_url>10_vitamin_b.html</product_url></item><item><p_id>2a</p_id><product_title>Vitamin C</product_title><product_category>Chemical</product_category><product_code>4503, 1111</product_code><product_img>img_10_vitamin_c.png</product_img><product_url>10_vitamin_c.html</product_url></item></items>";

我需要从data-prd_id属性获取值，并且在jquery中，我需要在xml中搜索该值。如果找到，我需要使用从xml中获取的值更改相应div的属性和值。目前，product_category＆amp; product_code不是必需的，但出于知识目的，我只需要理解它......

感谢您的帮助。的问候，

-

如何在循环中使用变量：lt jquery？

HTML

JAVASCRIPT

XML：

0 个答案: