Question

我正在尝试学习HTML和Javascript / jQuery。如果我有一个容器，其中包含标题，图像，描述和数字，那么我想创建一个具有完全相同格式的新容器（除了值将不同），这通常如何完成？

这是我在每个项目中寻找的格式示例。

    <li>
        <div>
            <div>
                Image Name
            </div>
            <div>
                <a href=URL>
                    <img src='image_url'>
                </a>
            </div>
            <div>
                Description
            </div>
            <div>
                num_comment Comments
            </div>
         </div>
    </li>

我只是创建一个字符串并与图像的实际值连接，然后将该字符串添加到我保存的名为html_content的变量中，然后将html值设置为html_content？这是通常的做法还是有更好的方法？

修改

为了更好地了解我目前正在做什么，这里是javascript：

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';


  function render(pics){
    for (var i in pics){
      html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
    };
    $('pics').html(html);
  }

Answer 1

在jQuery中，你只需要使用append（）函数来添加东西。

你可以做点像......

$('select element').append('<li><div>....etc.');

并且您想要一个不同的值，您可以使用变量。

Answer 2

您可以使用.clone()并创建此副本，然后遍历克隆对象并更改所需内容：

var $objClone = $("li").clone(true);

$objClone.find("*").each(function() {
    //iterates over every element. customize this to find elements you need.
});

要更改图像来源，您可以执行以下操作：

$objClone.find("img").attr("src", "new/img/here.jpg");

小提琴演示概念：http://jsfiddle.net/H9DnA/1/

Answer 3

您可能会发现探索一些JavaScript templating库很有用。基本的想法是您创建标记的模板：

<li>
    <div>
        <div>
            {{name}}
        </div>
        <div>
            <a href="{{url}}">
                <img src="{{imageUrl}}">
            </a>
        </div>
        <div>
            {{description}}
        </div>
        <div>
            {{comments}}
        </div>
     </div>
</li>

然后将它与一些相关的匹配对象合并，并将其插入到您的文档中：

{ name: 'Image Name', 
  url: 'http://example.com', 
  imageUrl: 'http://example.com/image.jpg', 
  description: 'Description', 
  comments [ { text: 'Comment' } ] 
}

Answer 4

我认为这样可以正常工作：

$('#button').click(function () {

    var html1 = '<li><div><div>';
    var html2 = '</div><div><a href="';
    var html3 = '"><img src="';
    var html4 = '"></a></div><div>';
    var html5 = '</div><div>';
    var html6 = '</div></div></li>';

    function render(pics){
        for (var i in pics){
            html = html + html1 + pics[i].name + html2 + pics[i].image_url + html3 + ...
            $("ul").append(html);
        }
    }
    // call render
});

我没有对您的代码进行测试运行，因此某处可能存在错误。我的调整在你的循环中添加了这一行$("ul").append(html);

Answer 5

function render(pics)
{
    var theList = document.getElementByid("LIST ID");

    for (var i in pics){

      var listItem = document.createElement('li');  // Create new list item

      var nameDiv = document.createElement('div');  // Create name DIV element
      nameDiv.innerHTML = pics[i].name;             // Insert the name in the div

      var img = document.createElement('img');      // Create Img element
      img.setAttribute('src',pics[i].src);          // Assign the src attribute of your img

      var imgDiv = document.createElement('div');   // Create Img Div that contains your img
      imgDiv.appendChild(img);                      // Puts img inside the img DIV container

      var descDiv = document.createElement('div');  // Create Description DIV
      descDiv.innerHTML = pics[i].description;      // Insert your description



      listItem.appendChild(nameDiv);                // Insert all of you DIVs 
      listItem.appendChild(imgDiv);                 // inside your list item 
      listItem.appendChild(descDiv);                // with appropriate order.

      theList.appendChild(listItem);                // Insert the list item inside your list.

    }

}

点击时附加新容器

5 个答案: