使用Jquery交換html元素？

我想改用我的HTML裏面的html元素時，我的屏幕尺寸得到低於880px，但是如我所料不工作...使用Jquery交換html元素？

我從一個PHP循環產生我的HTML裏面幾個職位，爲每個崗位，它看起來是這樣的：

<div class="post"> 
    <h1>Lorem ipsum</h1> 
    <p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

    </p> 
</div>

我想做的事時，我的瀏覽器屏幕得到880px及以下，h1和p元素會互相使用jQuery 的insertBefore掉期。

下面是我的代碼：

http://codepen.io/vincentccw/pen/GHnFD?editors=101

來源

2014-07-02 Vincent Chua

$(document).ready(function() { 

    $(window).resize(divSwap); 

    function divSwap() { 
     if ($(document).width() <= 880) { 
      $('.post').each(function() { 
       $el = $(this); 
       $el.find('p').insertBefore($el.find('h1')); 
      }); 
     } 
    } 

    divSwap(); 

});

來源

2014-07-02 01:41:17 pmandell

將divSwap函數設置爲窗口上resize事件的事件處理函數。 – pmandell

是的，我注意到，我發表了有關頁面加載的評論後，我刪除了評論。很好的答案，但肯定比我更好的解決方案。 – deebs

您可以添加p標籤下面的另一個h1標籤和隱藏在移動的第一個，並顯示在移動設備上的第二位。我討厭重複的信息，但是這是一個快速簡單的解決辦法：

<div class="post"> 
<h1 class="MobileHide">Lorem ipsum</h1> 
<p>

Lorem存有簡直是印刷排版行業的虛擬文本。 Lorem Ipsum自從16世紀以來一直是業界標準的虛擬文本，當時一臺未知的打印機採用了一種類型的廚房，並將其製作成樣本書。它不僅存活了五個世紀，而且還實現了電子排版的飛躍，基本保持不變。它在20世紀60年代隨着包含Lorem Ipsum段落的Letraset工作表的發佈以及最近使用包括版本的Lorem Ipsum在內的Aldus PageMaker等桌面出版軟件而得到了推廣。

</p> 
<h1 class="MobileOnly">Lorem ipsum</h1> 
</div>

然後在你的CSS中，「MobileHide」類顯示爲：inline或block 880px以上，display：none以下。並且「MobileOnly」類顯示：沒有超過880像素，並且在其下面顯示：塊或內聯。

希望有幫助！

來源

2014-07-02 01:40:39 deebs

使用Jquery交換html元素？

回答

相關問題