Inserting Element Based on a Condition

Question

I want to insert different url's dynamically after checking a condition

Here's the pseudocode

If div.id = "abc" then
create url <a href="www.zzz.html"'>Cosmetics</a>');
Append url to div

else if div.id = "xyz" then
create url <a href="www.abc.html"'>LEather goods</a>');
Append url to div

else if div.id = "mno" then
create url <a href="www.kkk.html"'>Diapers</a>');
Append url to div

and so on.

How can I write this in JavaScript/jQUery. How to handle the code efficiently if there are 15 such If-Else conditions.

This code is not looking good

if $("#abc) then

 var dynLink = $('<a href=zzz.html"'>Cosmetics</a>');
    $("#abc").append(dynLink);

else if $("#xyz")
 var dynLink = $('<a href=abc.html"'>LEather</a>');
    $("#xyz").append(dynLink);

Thanks!

Answer 1

You could try this:

var link = [
    ["#abc", "#wfh", "http://www.123.com", "Maine"],
    ["#123", "#qwe", "http://www.abc.com", "Texas"]
];

$.each(link, function(e) {
    $(link[e][0] + "," + link[e][1])
        .append("<a href='" + link[e][2] + "'>" + link[e][3] + "</a>");
});​

Example: http://jsfiddle.net/Yvuvh/5/

---

This is just simply setting up the links and titles in the array, and a for loop is searching through the array to see if it can find a div with any of those id's, and if so, then append the appropriate link.

To add more, just add another array to the link array, like so:

var link = [
    ["#abc", "#wfh", "http://www.123.com", "Maine" ],
    ["#123", "#qwe", "http://www.abc.com", "Texas" ],
    ["#xyz", "#zyx", "http://www.yzx.com", "Mexico"]
];​

Answer 2

if $("#abc) then

 var dynLink = $('<a href=zzz.html"'>Cosmetics</a>');
    $("#abc").append(dynLink);

else if $("#xyz")
 var dynLink = $('<a href=abc.html"'>LEather</a>');
    $("#xyz").append(dynLink);

▲ That is not valid JavaScript.

---

▼ This is how you do it when you have a bunch of if-thens:

switch(div.id){
    case "abc":
        $('<a href="zzz.html">Cosmetics</a>').appendTo("div#whateveritis");
        break;
    case "xyx":
        $('<a href="abc.html">Leather</a>').appendTo("div#whateveritis");
        break;
    case "more more more":
        //same stuff here.
        break;
    default:
        //default
        break;
}

Very self-explanatory for beginners. ;)

Seriously, you should start looking through stuff in MDN. It is a good place for JavaScript references and demos (examples).

Answer 3

Create an object that contains all of these relationships, like this:

var links = {
    'abc': { link:'foo.html', text:'Foo Link' },
    'xyz': { link:'bar.html', text:'Bar Link' }
};

Then we'll add a couple div elements to test this out:

​<div id="abc"></div>
<div id="xyz"></div>​​​​​​​​​​
<div id="foo"></div>

And lastly our jQuery which should add some links for us:

$("div").append(function(){
    var link = links[this.id];
    return link ? $("<a>", { href:link.href, html:link.text }) : "n/a" ;
});​​​

This cycles over all of our div elements, checking to see if their id is found within our links object. If it is, then we place a link within that div that has the appropriate properties. If we don't find that id within our object, we simply append "n/a" to the div.

<div id="abc"><a href="foo.html">Foo Link</a></div>
<div id="xyz"><a href="bar.html">Bar Link</a></div>
<div id="foo">n/a</div>

Demo: http://jsfiddle.net/vFjSw/

Answer 4

Put the div.id's in an associate array that maps to the target URL, then just look it up by key. One hashed lookup beats a linear number of if/else-if comparisons if you only have to load it once for each lookup...

This strikes me as more "elegant" or readable or maintainable regardless of micro-performance. It's not obvious to me which of make array v. run if/else if's is faster, you'll have to profile. If however, you 1) must optimize for time, and 2) only expect one use of this code for each time the page is loaded, the best you can do is put the url's you expect toward the top of the if/elif block. Be sure to comment exactly that you're doing this so future dev doesn't alphabetize them.