0

我有一个大名单，前任：

***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">+47 444444</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">+47 444444</a></div>
 <div class="office">office: <a href="http://vg.no">Oslo</a></div>
</div>

PS - 读这个

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

Fiddler 示例在这里 <-- 示例代码

4

3 回答 3

1

我不完全确定你在追求什么。我在效率方面的尝试依赖于 cloneNode 来创建新元素和 vanilla javascript 而不是 jQuery。它也比它需要的更冗长，因为我没有采用通用循环。正则表达式可能不是最佳选择。您真的应该编译任何解决方案并使用 jsperf 对其进行测试。我假设我不能只重用源容器中的节点。

我应该注意我宁愿避免使用 getElementsByClassName，但为了简单起见，我更喜欢它而不是手动 DOM 遍历和使用 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);​
于 2012-10-24T15:56:36.327 回答
1

如果您要向 DOM 添加大量元素，那么您可能需要考虑使用：

创建文档片段（）

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

所有浏览器都支持 DocumentFragment ，甚至 Internet Explorer 6，因此没有理由不使用它们。

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

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

于 2012-10-24T15:28:03.753 回答
0

这里有一些东西给你，但坦率地说不明白你真正想要什么。

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);
于 2012-10-24T15:27:47.607 回答