我只是想知道是否有更好的方法來編寫下面的代碼？注意：下面的作品100％很好。JQuery - 重新排列對象 - 最短的代碼解決方案

目前這會創建一個對象數組。那麼我稱他們爲對象。我可以更好地說DOM參考。注意：請糾正我 - 渴望學習。

然後它循環遍歷它們，隱藏所有並僅顯示那些與'sortText'中的文本/字符串匹配的具有類'.contactsBodyMainDisplayMemberUserNameH2'（這是很多兒童向下）的類。

var contactsMemberArray = $('#contactsMainWrapperDIV').children() 
          .map(function() {return $(this);}).get(); 
$.each(contactsMemberArray, function() { 
    $(this).hide(); 
    var username = $('.contactsBodyMainDisplayMemberUserNameH2', this).text(); 
    if(username != '' && username.toLowerCase().indexOf(sortText.toLowerCase()) >= 0) { 
     $(this).show(); 
    } 
});

有一個更快的方式做到這一點？
我需要先映射對象還是隻能對它們進行排序？

JS Fiddle

來源

2014-12-30 Adam

HI，很好的問題。然而，如果你把它變成一個簡單的方法讓人們更容易幫忙，那會更好。 – Todd

會做 - 謝謝你 – Adam

我知道你不會失望。：P – Todd

你可以做這樣的事情。

var contactsMemberArray = $('#contactsMainWrapperDIV').children().hide(); 
$.each(contactsMemberArray, function() { 
    var username = $(this).find('.contactsBodyMainDisplayMemberUserNameH2').text(); 
    if(username !== '' && username.toLowerCase().indexOf(sortText.toLowerCase()) >= 0) { 
     $(this).show(); 
    } 
});

來源

2014-12-30 09:54:05

您的代碼看起來不錯！您可以將第一行簡化爲：

var contactsMemberArray = $('#contactsMainWrapperDIV').children()

這應該仍然可以正常工作。返回的jQuery對象將包含一個包含子元素的數組，每個元素都是圍繞DOM元素的jQuery包裝器，您可以直接將其傳遞給$ .each。

通常在jQuery中，可以在'jQuery-space'中工作，並且很少需要調用get()從jQuery對象獲取DOM元素。您可以調用jQuery來獲得單個DOM元素或DOM元素數組周圍的包裝。這意味着您有時可以在沒有$.each循環的情況下執行操作。例如，只是做你的代碼的.hide()部分，你可以這樣做：

$('#contactsMainWrapperDIV').children().hide()

這將創建一個jQuery對象與數組保存所有的孩子，隱藏所有的人。

但是，爲了比較孩子與sortText的邏輯，我認爲你的$ .each循環是好的。

如果將sortText.toLowerCase()從循環中移出，那麼只需執行一次，而不是循環的每次循環，這樣做的確很小巧。

我已經更新了你的提琴，以顯示這些提示：http://jsfiddle.net/dyvhg23w/6/

你可以把它改寫成更jQuery的一個襯墊。我不一定是這些人的忠實粉絲，因爲他們的閱讀和維護可能會變得非常複雜，但他們的確幫助您瞭解如何鏈接jQuery命令。根據您小提琴的HTML，我們可以得到孩子們的陣列，隱藏的一切，然後過濾對sortText數組，然後顯示剩下：

var sortText = 'ee' 
var sortTextLower = sortText.toLowerCase() 
$(".contactsBodyMainDisplayMemberContainerDIV") 
    .hide() 
    .filter(function(idx, child) { 
     return $(child).find('.contactsBodyMainDisplayMemberUserNameH2') 
        .text().toLowerCase().indexOf(sortTextLower) >= 0 
    }) 
    .show()

http://jsfiddle.net/dyvhg23w/19/

希望幫助了一下，喊如果你有更多的問題。

來源

2014-12-30 09:53:02 sifriday

這裏的一個短VERS。更多來。

DEMO

var sortText = 'ee'.toUpperCase(), 
    $contacts = $('#contactsMainWrapperDIV > *').hide(); 
$.each($contacts, function() { 
    var $this = $(this); 
    ~$this[0].textContent.toUpperCase().indexOf(sortText) && $this.show(); 
});

編輯

我會說這是一個有點簡單：

$(function() { 
    var sortText = 'ee'; 
    $('#contactsMainWrapperDIV > *:not(:contains(' + sortText + '))').hide(); 
});

來源

2014-12-30 10:15:25 Todd

JQuery - 重新排列對象 - 最短的代碼解決方案

回答

DEMO

編輯

相關問題