JQuery - Rearrange Objects - Shortest Code Solution

Question

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();
    }
});

Is there a quicker way to do this?
Do I need to map the objects first or can I just sort through them?

JS Fiddle

HI, good question. Yet it'd be better if you plopped this into a jsfiddle to make it easier for people to help. — Todd
– Todd, Commented Dec 30, 2014 at 9:43

Alok Ranjan · Accepted Answer · 2014-12-30 09:54:05Z

1

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();
    }
});

answered Dec 30, 2014 at 9:54

Alok Ranjan

1004 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sifriday · Accepted Answer · 2014-12-30 10:12:34Z

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.

Todd · Accepted Answer · 2014-12-30 12:28:28Z

1

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();
});

edited Dec 30, 2014 at 12:28

answered Dec 30, 2014 at 10:15

Todd

5,4843 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

JQuery - Rearrange Objects - Shortest Code Solution

3 Answers 3

Comments

Comments

DEMO

edit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

edit

Comments

Your Answer

Sign up or log in

Post as a guest

Related