0

私はexの大きなリストを持っています:

***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

DOM に多くの要素を追加している場合は、次の使用を検討することをお勧めします。

createDocumentFragment()

ドキュメント フラグメントはメモリ内にあり、メイン DOM ツリーの一部ではないため、それに子を追加してもページ リフロー (要素の位置とジオメトリの計算) は発生しません。したがって、ドキュメント フラグメントを使用すると、多くの場合、パフォーマンスが向上します。

DocumentFragment はInternet Explorer 6 を含むすべてのブラウザーでサポートされているため、使用しない理由はありません。

リフローは、レイアウト エンジンの書式設定オブジェクトのジオメトリが計算されるプロセスです。

要素を追加しているので、これらの要素をドキュメント フラグメントに追加し、後でそれらの要素を DOM に追加することをお勧めします。

于 2012-10-24T15:28:03.753 に答える
1

あなたが何を求めているのか完全にはわかりません。私の効率化の試みは、cloneNode を使用して新しい要素を作成し、jQuery の代わりにバニラ JavaScript を使用しています。また、一般的なループを採用していないため、必要以上に冗長です。正規表現は最適なオプションではない可能性があります。ソリューションを実際にコンパイルし、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 に答える
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 に答える