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中包装内容，如果符合条件

回答

相关问题