javascript - 如何为每个div项添加标题名称并连续显示5个div项?

标签 javascript jquery css html pagination

我使用“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>

最佳答案

要用更复杂的 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 样式,例如让它们 float :左,并设置父级 ul 宽度以适合 5 个元素(这样接下来的 5 个将转到下一个行),看这个简单的演示 http://jsfiddle.net/paulitto/Qnbk4/

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

当然你需要调整这个以适应你的代码

关于javascript - 如何为每个div项添加标题名称并连续显示5个div项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16475006/

相关文章:

javascript - 检查其中一个父节点是否具有特定类的优雅方法

javascript - 构建动态 BottomNavigation NS 6.5 的问题

javascript - 使元素中的所有链接将新内容加载到同一元素中

jquery - 多个粘性元素 Jquery Sticky Float

javascript - 有必要在 Angular 指令链接内命名函数吗?

javascript - 如何处理克隆的幻灯片以在 SlickJS 中创建无缝的 html5 视频 slider ?

javascript - 使用 jquery/jstree 时禁用 Google Analytics

css - 如何在伪类之前和之后删除或禁用?

asp.net - 表单元素破坏了我在 Internet Explorer 中的 CSS 布局

javascript - 添加类以在右键单击时跨度并在右键单击另一个时将其删除