CODEWITHSUNDEEP
jqueryhtmlarraysobject
Adam
Adam

Reputation: 20922

JQuery - Rearrange Objects - Shortest Code Solution

I'm just wondering if there is a better way to write the following code? Note: below works 100% Fine.

Currently this creates an array of objects. Well I call them objects. I could be better said DOM References. Note: please correct me - eager to learn.

Then it loops through them, hiding all and only showing those that have a class '.contactsBodyMainDisplayMemberUserNameH2' (which is many children down) that matches the text/string in 'sortText'.

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

Upvotes: 1

Views: 57

Answers (3)

Todd
Todd

Reputation: 5454

here's one shorter vers. more to come.

DEMO

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

edit

i'd say this is a bit simpler:

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

Upvotes: 1

sifriday
sifriday

Reputation: 4482

Your code looks ok! You can simplify the first line to:

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

That should still work fine. The jQuery object returned by that will contain an array with the children in it, each of which is the jQuery wrapper around a DOM element, which you can pass directly to $.each.

Generally in jQuery it is OK to work in 'jQuery-space' and you rarely need to call get() to get the DOM element from the jQuery object. You can call jQuery to get a wrapper around a single DOM element, or around an array of DOM elements. This means you can sometimes do things without a $.each loop. For example, to just do the .hide() part of your code, you could do:

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

and that would create a jQuery object with an array holding all the children and hide all of them.

But for the logic of comparing the children against the sortText, I think your $.each loop is fine.

A really minor optimisation would to to move the sortText.toLowerCase() out of the loop, so you only do it once, rather than every pass of the loop.

I've updated your fiddle to show these tips: http://jsfiddle.net/dyvhg23w/6/

You could rewrite it to be more of a jQuery one-liner. I'm not necessarily a fan of these, as they can become quite complex to read and maintain, but they do help you get a feel for how to chain jQuery commands. Based on the HTML in your fiddle, we can get the array of children, hide everything, then filter the array against sortText, then show what remains:

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/

Hope that helps a bit, shout if you have more questions.

Upvotes: 1

Alok Ranjan
Alok Ranjan

Reputation: 100

You could do something like this.

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

Upvotes: 1

Related Questions