JavaScript - 在DIV中包裝內容，如果符合條件

我有一個相當複雜的問題。JavaScript - 在DIV中包裝內容，如果符合條件

通常的標記（這裏沒有問題）：

<div class="wrapper"> 
    <div class="title"> bla bla... </div> 
    <div class="content"> ...content... </div> 
    </div>

的「扭曲」的標記：

<div class="wrapper"> 
     ...content... </div> 
    </div>

正如你可以看到div.content開放標籤丟失。不幸的是我沒有對內輸出沒有控制.wrapper :(

所以，我的問題是：我怎樣才能檢測是否div.title是存在的，如果不是 - div.wrapper

後插入 <div class="content">（未.title僞）？

我知道如何使用jQuery做到這一點，但我需要一個純JavaScript解決方案，因爲與jQuery你得到一個小的「延遲」之前的佈局得到固定。任何想法？

來源

2010-11-18 Alex

如果您等待DOM準備就緒，您將始終得到延遲。 – jwueller 2010-11-18 03:40:24

呃......你對於最小的亞秒延遲有多擔心？你是否真的願意爲亞秒級的交易提供極大的簡單性，在大多數情況下肉眼不可見，延遲？尼斯名字順便說一句。 :) – Alex 2010-11-18 03:41:39

它不是真的亞秒，它更像是1-2秒:)也許是因爲瀏覽器在加載jquery之前呈現html ...這就是爲什麼我想追加一個'' 'div' – Alex 2010-11-18 03:44:04

有更公平一點code without jQuery。

var divs = document.getElementsByTagName('div'), 
    foundTitleDiv = false; 

for (var i = 0, divsLength = divs.length; i < divsLength; i++) { 
    if (divs[i].className.match(/\btitle\b/)) { 
     foundTitleDiv = true; 
     break; 
    } 
} 

if (foundTitleDiv) { 
    var wrapper = document.createElement('div'); 
    wrapper.className = 'content'; 
    var div = divs[i]; 
    wrapper.appendChild(div.cloneNode(true)); 
    div.parentNode.replaceChild(wrapper, div); 
}

It works!

將這個在腳本的底部，或者你可以等待裝載window.onload = function() { }或研究onDOMReady事件整個窗口。

雖然這回答你的問題，但你有無效的HTML（無關的</div>）可能使這個解決方案無效。

來源

2010-11-18 03:42:14 alex

非常感謝你:)另外一個問題，你認爲用PHP正則表達式做這個會更好嗎？在顯示在屏幕上之前，我可以獲得整個html輸出。 – Alex 2010-11-18 04:03:20

那麼，JQuery是純Javascript，但使用JQuery瀏覽器需要更多的Javascript解析，這可能就是爲什麼你會遇到一些延遲。我不確切知道如何使用Javascript修復此問題，因爲您輸出的是無效的HTML。這將被不同的瀏覽器解釋爲不同。正確的做法是使用服務器端代碼（如PHP或ASP）輸出正確的HTML。

來源

2010-11-18 03:42:16 Kibbee

也許你可以在發送之前通過搜索在服務器上修復它，如果缺失，添加它。如果您無法在服務器上修復它，那麼您可以使用內嵌JavaScript來完成此操作，但是您需要將內容作爲javascript變量添加進去，然後解析它，然後寫出來。

下面是一個示例（僅供參考，我知道RegEx是錯誤的，但認爲它確實可以得到好評）。

<div class="wrapper"> 
    <div class="title"> bla bla... </div> 
    <script type="text\javascript"> 
     var content = "<div class="content"> ...content..." 
     if (!content.match(/<div class="content">/)) 
      content = "<div class="content">" + content; 
     document.Write(content) 
    </script> 
    </div> 
</div>

來源

2010-11-18 03:47:41 Brian

如果你這樣做，你應該逃脫你的內容;） – jwueller 2010-11-18 03:49:58

請在2010年不要'document.write（）'：P – alex 2010-11-18 03:50:14

JavaScript - 在DIV中包裝內容，如果符合條件

回答

相關問題