Skip to content

Edit DOM element in var before append it

I have a function that appends elements to the page who calls it using a template, like this:

 var plantillaTemplate = '<div class="contenedor-oferta"><a class="link" href="${enlace}" target="_blank"><!-- Linia superior --><div class="titol">${titulo}</div><!-- Columna esquerra --><div class="left"><div class="foto"> <img class="imatge-oferta" src="${enlaceFoto}"> </div><div class="enlace"><span>Precio alojamiento desde</span><br><span id="test">${precio} $ </span></div></div><!-- Columna dreta --><div class="right"><span>${textoOferta}</span></div></a> </div>';      

    for (var i = 0; i < num_productos; i++) {
        var dataActual = data[i];               
        var valores = { "enlace"        : dataActual['enlace'][idioma],
                        "titulo"        : dataActual['titulo'][idioma],
                        "enlaceFoto"    : dataActual['imagen'][idioma],
                        "precio"        : dataActual['camping'],
                        "textoOferta"   : dataActual['descripcion'][idioma]};           

        var test = $.tmpl(plantillaTemplate, valores).appendTo("#divOfertas");  
    }

I have a function parameter that says which of the appended element sections is visible and which is not. So what I want to do is access to an element in the test variable like I do with jQuery and disable it.

Is there any way to do this?

PD: I know that I can do this after the append, but I would like to do it before.

Answer

After the $.tmpl call, the resulting jQuery object should be able to support all of the usual jQuery methods you’d need to disable elements, even if they haven’t been added to the DOM yet. For example:

var test = $.tmpl(plantillaTemplate, valores).find('.test').prop('disabled', true).end().appendTo("#divOfertas");

Use the .find() method to focus on a specific set of elements by passing the usual selector string. The OP mentions “disabling” elements, so I think the .prop('disabled', true) method is what you’re looking for. Finally, the .end() method makes sure that you append the entire batch of HTML to the document, not just the results of the .find().