Question

我有一个相当复杂的问题。

通常的标记（这里没有问题）：

   <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 class="content"> div.wrapper（不是.title） >？

我知道如何用jQuery做这个，但是我需要一个纯粹的javascript解决方案，因为使用jQuery你会在布局修复之前得到一个小的“延迟”。有什么想法吗？

Answer 1

没有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() { }的整个窗口或研究有关事件的事件。

虽然这会回答您的问题，但您拥有无效HTML（无关的</div>）这一事实可能会使此解决方案无效。

Answer 2

嗯，JQuery是纯粹的Javascript，但是使用JQuery，浏览器要解析的Javascript要多得多，这可能就是为什么你会遇到一些延迟。我不确切知道如何使用Javascript修复此问题，因为您输出的是无效的HTML。这将由不同的浏览器以不同的方式解释。正确的做法是通过使用服务器端代码（如PHP或ASP）输出正确的HTML。

Answer 3

也许您可以在通过搜索发送之前在服务器上修复它，如果缺少，则添加它。如果您无法在服务器上修复它，那么您可以使用内联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>

JavaScript - 如果满足条件，则在DIV中包装内容

3 个答案: