0

我使用“for 循环”多次调用 getjson 并获得响应并希望在 div 内显示出售的商品。目前我的代码在每个框架的右侧显示项目名称，但我想要 iframe 下方的项目名称，就像下面显示的代码块一样：

想要输出而不是我的代码当前输出但不知道如何输出的示例 div 项：

<li>
       <iframe src='http://bsite.com/itemshow.php?pen' height=200 width=200 style='border: none;'></iframe><br>
        <div class="details">
        <div class="title">
          <a href="/pen/">pen</a>
        </div>
        </div>
    </li>

你们能告诉我如何在每个潜水项目下方添加项目名称（就像上面的代码块一样）并将 div 的数量限制为每行 5 个？

当前显示 div 的部分代码：

var siteContents2 = "<iframe src='http://bsite.com/itemshow.php?"+itemName' height=200 width=200 style='border: none;'></iframe>"+itemName;

document.getElementById("myDiv").innerHTML += siteContents2;

完整代码： 

function GetJSONResult(itemName)
{
$.getJSON('http://anyorigin.com/get?url=http://asite.com/checkit.php'+ itemName + '/&callback=?', function(data){

       var siteContents = data.contents;      
  //writes to textarea  
  document.myform.outputtext.value = siteContents ;  

var n=siteContents.search("This item is not on sale");

if(n===-1)
    {
     //alert("This item is on sale. n:"+n);

var siteContents2 = "<iframe src='http://bsite.com/itemshow.php?"+itemName' height=200 width=200 style='border: none;'></iframe>"+itemName;

document.getElementById("myDiv").innerHTML += siteContents2;
};
});  

};

items=["pen","book","paper","ink","tshirt","map"];

for (var i=0;i<items.length;i++)
{
//document.write(i+")"+items[i] + "<br>");

GetJSONResult(items[i]);
}


</script>   
</head>

<body>

  <div id="myDiv"></div>
4

1 回答 1

1

用更复杂的 html 替换你的 iframe 我认为你只需要扩展你的字符串

var siteContents2 = "<li>"
   +"<iframe src='http://bsite.com/itemshow.php?"+itemName+"' height=200 width=200 style='border: none;'></iframe><br>"
   +"<div class='details'>"
   +"<div class='title'>"
   +"<a href='/"+itemName+"/'>"+itemName+"</a>"
   +"</div></div></li>";

然后像您一样将这些内容附加到 myDiv 中，尽管我建议您使用 jquery 来执行此操作，因为您已经在使用它

$("#myDiv").append(siteContents2);

此外，您的 myDiv 可能应该是 UL 或 OL 列表，而不是 DIV，因为您希望将列表项附加到它。

要使您的 li 项目每行显示 5 个项目，您可以为它们应用适当的 css 样式，例如使它们浮动：左，并将父 ul 宽度设置为适合 5 个项目（以便下一个 5 进入下一行），看到这个简单的演示http://jsfiddle.net/paulitto/Qnbk4/

#myDiv{
    width:500px;
}
#myDiv li{
    float:left;
    width:100px;
}

当然，您需要对此进行调整以适合您的代码

于 2013-05-10T08:27:54.917 回答