Question

问题：我应该在我的博客HEAD上粘贴哪些代码？

使用任何方法（jQuery，javaScript，CSS，HTML，排除php），如果有多个<img/>，如何在帖子条目上向<img/>添加新的HTML结构？

条目内容示例

如果帖子条目只有一个<img/>。没有添加或更改HTML的结构。

但如果有多个<img/>（例如下方），

<div class="summary post-body entry-content">

<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>

 <!-- end summary post-body entry-content --></div>

如何将其转换为HTML（自动），

<div class="summary post-body entry-content">

               <!-- start te-container --><div class="te-container">

        <div class="te-controls">
        <select id="type">
        <option value="te-flip1">Flip 1</option>
        <option value="te-flip2">Flip 2</option>
        <option value="te-flip3">Flip 3</option>
        <option value="te-flip4">Flip 4</option>
        </select>
        <a id="te-next" href="#" class="te-next">next</a>
                             <div class="te-shadow"></div>
        </div>
                    <!-- start-wrapper --><div id="te-wrapper" class="te-wrapper">

     <div class="te-images">
    <img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
    <img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
    <img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
    <img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
     </div>
                                    <div class="te-cover">
    <!-- HOW TO DO AUTOMATICLY, FISRT <img/> located at here --><img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg"/>
                                                    </div>
    <div class="te-transition">
    <div class="te-card">
      <div class="te-front"></div>
      <div class="te-back"></div>
    </div>
    </div>

                  <!-- end te-wrapper --></div>
                  <!-- end te-container --></div>

<!-- end summary post-body entry-content --></div>

Answer 1

我不确定你的意思是“自动”。

但如果您希望div“自动”显示img，则可以使用js。命名为div，其中包含img。然后在js中写下这个：

$(document).ready( function () {
   document.getElementsByName('div_name_here').innerHTML = <img src='...'/>
}

希望有所帮助。对不起，我的英语不好。

Answer 2

所以这是一种解决问题的方法，

首先要清楚，因为你想在代码中直接添加某些标记，我将它们放在变量中。将子节点保存在另一个变量中，使用现有标记附加该节点并更新所要求的某些元素。如果可用，我肯定会要求更好的解决方案。

以下是您的方案的脚本，

$(document).ready(function(){
//checks if no. of image is > 1
if($(".summary").children().length > 1){

   // gets all elements inside that div
   var images = $(".summary").children();

   //makes that div empty 
   $(".summary").empty();

   //kept whole markup inside a variable
   var newLayout = "<div class='te-container'> <div class='te-controls'><select id='type'><option value='te-flip1'>Flip 1</option><option value='te-flip2'>Flip 2</option><option value='te-flip3'>Flip 3</option><option value='te-flip4'>Flip 4</option></select><a id='te-next' href='#' class='te-next'>next</a><div class='te-shadow'></div></div><div id='te-wrapper' class='te-wrapper'><div class='te-images'></div><div class='te-cover'></div><div class='te-transition'><div class='te-card'><div class='te-front'></div><div class='te-back'></div></div></div></div></div>";

    //appends the layout inside .summary div
    $(".summary").append(newLayout);

    //adds the images inside new div
    $(images).clone().appendTo(".te-images");

    //gets first child image of .te-images
    var firstImagePath = $(".te-images img:first-child").attr("src"); 

    //adds first child image of .te-images inside .te-cover div 
    $(".te-cover").append("<img src="+ firstImagePath + " />");

}
});

Live Demo

如果有多个<img/>，则在帖子条目上向<img/>添加新的HTML结构

问题：我应该在我的博客HEAD上粘贴哪些代码？

条目内容示例

2 个答案: