2
\$\begingroup\$

I'm cloning a fairly complex div/ page and changing various things in it before appending it to the DOM. The current method seems long-winded, and I was hoping if there was a simpler way of doing it?

$.each(results.jobs, function(i, result){

var theID = result.id,
theTitle = result.title,
theDescription = result.description,
theLocation = result.location,
theType = result.type,
thePosted = posted[2]+'-'+posted[1]+'-'+posted[0],
theAgency = result.company,
theRef = result.reference,
theSalary = '',
theApps = result.number_of_applications,
hasApplied = result.applied,
theFeatured = result.featured,
theJobNo = pages*i +1;

if(result.hasOwnProperty('salary')){
    var theSalary = result.salary.information.replace(/Â/g, '');
}

var jobContainer = $('#job-container').clone(true, true).attr('data-jobno', theJobNo);

jobContainer.find('h1').text(theTitle);
jobContainer.find('#job-location').text(theLocation);
jobContainer.find('#job-type').text(theType);
jobContainer.find('#job-date').text(thePosted);
jobContainer.find('#job-agency').text(theAgency);
jobContainer.find('#job-description').html(theDescription.replace(/£/gi, '£'));
jobContainer.find('#job-ref').text(theRef);
jobContainer.find('#job-id').text(theID);
jobContainer.find('.apply-btn, .email-btn, .save-btn').attr('id', theID);
jobContainer.find('.save-btn').text('Save Job').removeClass('job-saved');

if(localStorage["saved"]!=null && localStorage["saved"]!= '[]'){
    if(localStorage["saved"].indexOf(theID)>= 0){
        jobContainer.find('.save-btn').addClass('job-saved').text('Job Saved');
    }
}

if(theFeatured === '1'){
    jobContainer.find('#job-featured').show();
}else{
    jobContainer.find('#job-featured').hide();
}

if(localStorage["applied"]!=null && localStorage["applied"]!= '[]'){
    if(localStorage["applied"].indexOf(theID)>= 0){
        jobContainer.find('.job-alert').show();
    }
}

if(theSalary != null){
    jobContainer.find('#job-row-salary').show();
    jobContainer.find('#job-salary').text(theSalary);
}else{
    jobContainer.find('#job-row-salary').hide();
}

if(theApps === '0'){
    jobContainer.find('#job-apps').html('<span style="color:#219a00">Be first to apply!</span>');
}else{
    jobContainer.find('#job-apps').html(theApps);
}

viewJobList.push(jobContainer)

});

$('#slider').html('').append(viewJobList)

This is inside an Ajax success function which is made to an API. I'm cloning an existing page in the HTML and adding new information, adding it to an array/ list then appending to the DOM just the once.

\$\endgroup\$
2
\$\begingroup\$

This seems a textbook case for using Angular.

Assuming you do not have the time to invest in Angular, you could consider the following: If you named all your divs after your result properties ( for example '#job-agency' -> #job-company ), then you would have to do far less extraction work and far fewer text() calls.

You could do something like:

$.each(results.jobs, function(i, result){

  var key;

  //Enhance your result object with some calculated values
  result.thePosted = posted[2]+'-'+posted[1]+'-'+posted[0];
  result.theJobNo = pages*i +1,

if(result.hasOwnProperty('salary')){
  result.theSalary = result.salary.information.replace(/Â/g, '');
}

var jobContainer = $('#job-container').clone(true, true).attr('data-jobno', theJobNo);

for( key in result )
{
  jobContainer.find( '#job-' + key ).text( result[key] );
}

jobContainer.find('.apply-btn, .email-btn, .save-btn').attr('id', theID);
jobContainer.find('.save-btn').text('Save Job').removeClass('job-saved');

etc. etc.

The rest of the code is ok once you apply consistent indenting.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.