代码效率专家 - 操纵列表 - 字符串比较 - 附加元素到另一个div

Question

我有一个大列表，例如：

***orginal list***
<div class="ms-contactcardtext3" id="ProfileViewer_ProfileDetails">
   <div cellpadding="0" cellspacing="0" class="ms-my-profileDetails">
    <div>office: <a href="http://vg.no">Oslo</a></div>
    <br><div>User type : <a href="http://vg.no">Ansatt i XXX</a></div>
    <br><div>Company : <a href="http://vg.no">XXX</a></div>
    <br><div>phone: <a href="http://vg.no">[phone]</a>
    </div>
</div>                                                                     

我想操纵并将其移至同一页面上的目的地div

***List I want***
<div class="destination">    
 <div class="company">Company : <a href="http://vg.no">XXX</a></div>
 <div class="userType">User type : <a href="http://vg.no">Ansatt i XXX</a></div>
 <div class="phone">phone: <a href="http://vg.no">[phone]</a></div>
 <div class="office">office: <a href="http://vg.no">Oslo</a></div>
</div>

PS-阅读此

1. 我无法在大列表中添加类/ID，因此我必须使用字符串比较
2. 列表可能会不时更改，以便每个元素的顺序可以更改，但是我知道顺序

提琴手示例此处＆lt; - 示例代码

Answer 1

如果您在DOM中添加了很多元素，则可能需要考虑使用：

createCumentFragment（）

由于文档片段在内存中，而不是主DOM的一部分 树，附加孩子不会导致页面反流（计算 元素的位置和几何形状）。因此，使用文档 片段通常会带来更好的性能。

在所有浏览器中都支持文档范围，甚至Internet Explorer 6，因此没有理由不使用它们。

回流是布局引擎的几何形状的过程 计算格式化对象。

由于您正在添加元素，因此最好将这些元素添加到文档片段，然后将这些元素附加到DOM。

Answer 2

我不完全确定您的追求。我提高效率的尝试依赖于创建新元素和香草JavaScript而不是jQuery的克洛诺德。它的详细性比需要更多，因为我没有采用通用循环。正则可能不是最好的选择。您应该真正编译任何解决方案，并使用JSperf进行测试。我假设我不能仅仅在源容器中重新使用节点。

我应该注意使用getElementsByClassName，我宁愿避免使用，但是为简单起见，我比手动dom traversing and getElementById

更喜欢它

http://jsfiddle.net/qpz9k/

var s = document.getElementsByClassName('ms-my-profileDetails')[0],
    d = document.getElementsByClassName('destination')[0],
    c = s.childNodes,
    t = d.hasOwnProperty('textContent') ? 'textContent' : 'innerText',
    rCompany = /^s*Company/,
    rType = /^s*User type/,
    rPhone = /^s*phone/,
    rOffice = /^s*office/,
    div = document.createElement('div'),
    newDiv,
    company, type, phone, office, node, text, content, link, child, i, j;
for (i = 0; i < c.length; i += 1) {
    node = c[i],
    text = node[t],
    content = node.childNodes,
    link = null;
    for (j = 0; j < content.length; j += 1) {
        child = content[j];
        if (child.tagName === 'A') {
            link = child;
            break;            
        }
    }
    if(rCompany.test(text)) {
        company = link;
    } else if (rType.test(text)) {
        type = link;        
    } else if (rPhone.test(text)) {
        phone = link;
    } else if (rOffice.test(text)) {
        office = link;
    }
}
newDiv = div.cloneNode(false);
newDiv.className = "company";
newDiv[t] = 'Company : ';
company && newDiv.appendChild(company.cloneNode(true));
d.appendChild(newDiv);
newDiv = div.cloneNode(false);
newDiv.className = "userType";
newDiv[t] = 'User type : ';
type && newDiv.appendChild(type.cloneNode(true));
d.appendChild(newDiv);
newDiv = div.cloneNode(false);
newDiv.className = "phone";
newDiv[t] = 'Phone : ';
phone && newDiv.appendChild(phone.cloneNode(true));
d.appendChild(newDiv);
newDiv = div.cloneNode(false);
newDiv.className = "office";
newDiv[t] = 'office : ';
office && newDiv.appendChild(office.cloneNode(true));
d.appendChild(newDiv);​

Answer 3

在这里为您准备的东西，但坦率地说，您不了解您真正想要的。

var ordered = [];
$('#ProfileViewer_ProfileDetails .ms-my-profileDetails div').each(function() {
  var that = $(this);
  var compare = that.text().split(':')[0];
  if (compare === "office") {
    ordered[3] = that;
  }
  if (compare === "User type ") {
    ordered[1] = that;
  }
  if (compare === "Company ") {
    ordered[0] = that;
  }
  if (compare === "phone") {
    ordered[2] = that;
  }
});
$(".destination").append(ordered);