Question

As a result of my question here:
Passing site properties with javascript
I’m using the code below to pass text from one div to another in any instance that the data-target is equal to some elements class on a page.

$('#sp').children().each(function() {
    $($(this).data().target).html($(this).html());
});

However, I’m wondering if instead of passing text to an html element, if i could type text on the page that is equal to the data-target value – then have that text be replaced by the text in data target. For example:

<div id="sp" style="display:none;">
<span data-target=".busFullName">My Great Company</span>
</div>

<!-- On some page -->
<p>sp.busFullName has been around since 1920</p>

<!-- Rendered text would be -->
<p>My Great Company has been around since 1920</p>

This way I don’t have to create an extra tag every time i use a property created.

Any insight would be appreciated. Thanks.

Answer 1

I don’t think you should take this approach since it renders your code semantically meaningless and somewhat unintelligible if JavaScript isn’t available in the client environment. That being said here is how I would have gone about it:

(function(){
    // Containing element's ID
    var boxID = "#sp";
    // All data-target elements within containing element
    $("[data-target]", boxID).html(function(a,b){
        // Pattern of #id.targetValue
        var pattern = boxID.slice(1) + $(this).data("target");
        // Find everything in body that contains this pattern
        $(":contains("+pattern+")", "body").html(function(c,d){
            // Replace instances of pattern in html with html
            return d.replace(pattern, b);
        });
    });
})();​

Demo: http://jsfiddle.net/rpHB2/3/