How to read UI element value using jQuery (context vs find) ?

Anjum Rizwi 0

Do you have any preferences for below code code snippet? What approach do you follow when your site have too many fields. Option 1:

PriorityOfAccessModel:
{
Id: $('#divPriorityAccess #Id').val(),
FamilyId: $('#divkPriorityAccess #FamilyId').val(),
ChildId: $('#divkPriorityAccess #ChildId').val(),
Comment: $('#divkPriorityAccess #Comment').val(),
CreatedBy: $('#divkPriorityAccess #CreatedBy').val(),
CreatedOn: $('#divkPriorityAccess #CreatedOn').val(),
Categories: accessPriority.getCategory(),
Allocating: { Id: allocating }
}

Option 2 :

var $x = $('#divPriorityAccess');

                var accessModel =
                {
                    Id: $x.find('#Id').val(),
                    FamilyId: $x.find('#FamilyId').val(),
                    ChildId: $x.find('#ChildId').val(),
                    Comment: $x.find('#Comment').val(),
                    CreatedBy: $x.find('#CreatedBy').val(),
                    CreatedOn: $x.find('#CreatedOn').val(),
                    Categories: accessPriority.getCategory(),
                    Allocating: { Id: allocating }
                };

Option 3:

var $y = $('#divkPriorityAccess');
var accessModel =
{
Id: $('#Id', $y).val(),
FamilyId: $('#FamilyId', $y).val(),
ChildId: $('#ChildId', $y).val(),
Comment: $('#Comment', $y).val(),
CreatedBy: $('#CreatedBy', $y).val(),
CreatedOn: $('#CreatedOn', $y).val(),
Categories: accessPriority.getCategory(),
Allocating: { Id: allocating }
};

Context:

Quote:

$('.child', parentContext); Ops/Sec: 105,442 ±7.03% fastest

Find:

Quote:

$(parentContext).find('.child'); Ops/Sec: 113,119 ±10.53% fastest

My above finding is based on

Quote:

jQuery Selector Benchmark

Libin Emmanuel

It's always better to specify the context. Especially when we have a heavy DOM.

Richard Deeming

All three examples you have given are using ID selectors[^]. Since each ID within the document should be unique, there's no point specifying the ID of the parent element, using the .find method, or passing the parent element with the selector. With an ID selector, jQuery uses the document.getElementById function, which is extremely efficient. All of your examples will require additional checks, which will slow your code down. Also, by specifying the parent element's ID, your script is now tied to the layout of your document. Therefore, I would prefer option 4:

PriorityOfAccessModel:
{
Id: $('#Id').val(),
FamilyId: $('#FamilyId').val(),
ChildId: $('#ChildId').val(),
Comment: $('#Comment').val(),
CreatedBy: $('#CreatedBy').val(),
CreatedOn: $('#CreatedOn').val(),
Categories: accessPriority.getCategory(),
Allocating: { Id: allocating }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer