Question

我使用“for loop”多次调用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>

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

当然，你需要adpat这个以适合你的代码

如何为每个div项添加标题名称并在一行中显示5个div项？

1 个答案: