1

I'm trying to learn HTML and Javascript/jQuery. If I have a container which holds a title, an image, a description and a number, then I want to create a new container with the exact same format (except the values will be different), how is this commonly done?

This is an example of the format I'm looking for in each item.

    <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>

Do I just create a string and concatenate with the actual values for the image, then add that string to some variable I've saved called html_content, and then set the html value to html_content? Is that the common way of doing this or is there a better way?

EDIT

To give a better idea of what I'm currently doing, here's the 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);
  }
4

5 に答える 5

0

jQuery では、append() 関数を使用して何かを追加するだけです。

あなたは次のようなことができます...

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

別の値が必要な場合は、変数を使用できます。

于 2013-05-24T18:53:48.327 に答える
0

これを使用.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/

于 2013-05-24T18:54:08.720 に答える
0 
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.

    }

}
于 2013-05-24T19:33:27.263 に答える
0

JavaScriptテンプレートライブラリのいくつかを調べると役立つ場合があります。重要なアイデアは、マークアップのテンプレートを作成することです。

<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' } ] 
}
于 2013-05-24T19:05:46.937 に答える