Javascript代碼爲字母排列的div

我正在編輯一個網頁，其中包含一個div包裹的醫生名稱和圖像列表。我將更多地添加到該列表中，而我的客戶現在需要按字母順序排列所有名稱。就像手動做的那樣（我知道我的客戶將來也會增加更多的醫生），我試着寫一個腳本來爲我完成這項工作。我將每位醫生都包裹在一個名爲「alphabetize」的div中，並在每位醫生的姓氏周圍設置了「lastName」的span id。Javascript代碼爲字母排列的div

<div class="alphabetize large-6 columns sameheight-wrap"> 
    <div class="large-4 medium-4 columns sameheight PadT20"> <img src="../imgs/dev/crna-staff/John-Doe.jpg" alt=" John Doe, CRNA" class="pictureBottomBorder"> </div> 
    <div class="large-8 medium-8 columns contenttable sameheight PadT20"> 
     <div class="border vmid text-center bgdblue PadB"> <span class="white medium"><strong>John<span id="lastName">Doe</span></strong><br> 
     </span> <span class="white PadT5"> MSN, Thomas Jefferson University School of Nurse Anesthesia</span> </div> 
    </div> 
    </div>

我把下面的腳本放在那個頁面上;

<script> 
var $divs = $("div.alphabetize"); 

$(function() { 
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
    return $(a).find("#lastName").text() > $(b).find("#lastName").text(); 
}); 
$("#alpha").html(alphabeticallyOrderedDivs); 
}); 
</script>

由於某些原因，腳本運行不正常。醫生無序，我還需要添加一個變量的代碼，排序前3個字母的姓氏。誰能幫忙？ Javascript並不是我的強項。不知道我是否錯過了一些東西。

來源

2015-11-03 Eddie

之前，我嘗試一個答案，你反對讓你的醫生的名字在JavaScript對象/數組？之後操作頁面效率不高。 – jdu

ID必須在頁面上單數。 – epascarello

jdu - 我接受任何不涉及手動訂購60多名醫生的解決方案。歡迎任何建議，謝謝。 – Eddie

下面是一段代碼，它會告訴你如何輕鬆地對此進行排序。主要的問題，但是，如下：

return $(a).find("#lastName").text() > $(b).find("#lastName").text();

的sort()功能要求返回的值之一，0保持倉位，-1當前元素之前將其移動和1之後移動。這意味着你可以回到後而不是之前，所以你排序失敗。

因爲我想用一個數據屬性提出解決方案，並沒有更多的HTML跨度和需要被渲染（可能隱藏之後）的風格，所以這裏是我的建議：

<div data-alphabetize="John Doe">John Does Content</div>

我們可以串起一些功能來獲得正確的輸出。我們將需要prototype.slice.call將返回的查詢選擇器節點列表轉換爲數組，然後我們需要使用sort按字母順序對其進行排序，最後我們可以使用forEach來遍歷數組並將節點插入到正確的位置。

我使用的是vanilla JS--主要是爲了展示如何在不加載jQuery的情況下完成簡單的事情。當然，你也可以用jQuery來做到這一點。

// Turn querySelectorAll NodeList into an Array 
 
Array.prototype.slice.call(document.querySelectorAll('[data-alphabetize]')) 
 
// Sort the array by data-alphabetize attribute (reverse order) 
 
.sort(function(a, b){ 
 
    return a.getAttribute('data-alphabetize') < b.getAttribute('data-alphabetize') 
 
    ? 1 : -1; 
 
}) 
 
// Insert every node in order 
 
.forEach(function(v, i, a){ 
 
    var parent = v.parentNode; 
 
    parent.removeChild(v); 
 
    parent.insertBefore(v, parent.childNodes[0]); 
 
});

<div> 
 
    <div data-alphabetize="Beta">Joseph Alfred <strong>Beta</strong></div> 
 
    <div data-alphabetize="Alpha">Mark Unicode <strong>Alpha</strong></div> 
 
    <div data-alphabetize="Gamma">Graham <strong>Gamma</strong>-Python</div> 
 
    <div data-alphabetize="Omega">Matthew <strong>Omega</strong></div> 
 
</div>

來源

2015-11-03 15:13:34 somethinghere

Javascript代碼爲字母排列的div

回答

相關問題