jquery - html() of variable option with multiple elements?

Question

I'm not quite sure if I am doing this right, as I am no jquery pro. But here are the facts: I need all the #box in my kontinent[i].content as html code appeded to the previous html in the #content div. This seems to work just fine at first, but when I look closely, only the first element (eg. "#box1" in europe.content is appended and I don't understand why.

Do I have to loop through the elements selected by kontinent[i].content?

Here is my code:

    $(document).ready( function() {
    var europa = {
        content: $( '#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37' ),
        name: "europa"
        };
    var usa1 = {
        content: $( '#box38' ),
        name: "usa1"
        };
    var usa2 = {
        content: $( '#box3,#box17' ),
        name: "usa2"
        };
    var afr = {
        content: $( '#box29' ),
        name: "afr"
        };
    var asi = {
        content: $( '#box4,#box11,#box12,#box14,#box15,#box16,#box22,#box24,#box26,#box30,#box31,#box34,#box35,#box36' ),
        name: "asi"
        };
    var aus = {
        content: $( '#box2' ),
        name: "aus"
        };

    var kontinent = [europa, usa1, usa2, afr, asi, aus];
    var content = $('#content');
    var precon = content.html();
    var i = 0;

    $('#world-weltkartelinks a').click( function( event ) {
        event.preventDefault();
        i = 0;

        while ( i <= 5 ) {
            if ($(this).attr('data-region') == kontinent[i].name) {
                content.html(precon + kontinent[i].content.html());
            };
            i++;
        };
    });
  });

Nope · Accepted Answer · 2014-06-24 08:57:10Z

1

Depending on how much you can change the setup of your code it might work better to have a main object, eliminating the need to loop in the first place, similar to his:

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

The benefit now is that you can access the kontinent without looping through it. However, to get the html content of all selectors in your content property you still need a loop though. similar to this:

var kontinent = regions;
var content = $('#content');
var precon = content.html();

$('#world-weltkartelinks a').click( function( event ) {
    var region = $(this).attr('data-region')

    if (kontinent[region]) { // no more looping needed
        var allBoxes = '';

        $(kontinent[region].content).each(function () { // still needs to loop to extract all HTML values for all selectors.
            return allBoxes += this.innerHTML;
        });

        content.html(precon + allBoxes);
    }
}

DEMO - Using an object instead of an array

The demo is using a scaled down version as I don't have your actual HTML to see a working demo of using the main object:

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

var kontinent = regions;
var content = $('#content');
var precon = content.html();

var region = 'europa';
if (kontinent[region]) {
    var allBoxes = '';

    $(kontinent[region].content).each(function () {
        return allBoxes += this.innerHTML;
    });

    content.html(precon + allBoxes);
}

edited Jun 24, 2014 at 8:57

answered Jun 24, 2014 at 8:19

Nope

22.4k8 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

samtun Over a year ago

Thanks for this answer, showed me things I did not know about. But I still got this error, that there is just the first box of the element (eg europa) appended? Like only #box1 gets appended to the content, the rest does not.

Nope Over a year ago

@samtun: This MDN page on Working with Objects shows how you can access objects with either dot-notation , i.e: object.propertyName or access them as "associative arrays" i.e: object["propertyName"], which works as each object property is associated with a string value. In regards to the missing appended data, I didn't realise you wanted all of them, my bad. Sorry about that. In that case looping might not be avoided. I have a look again though.

samtun Over a year ago

Okay, but thanks so far at first! This reduced my code alot and made me dig deeper into the use of objects.

Nope Over a year ago

@samtun: I hope I understood you right. I edited the code to get the html content of all the element selectors specified in the content property of the matched kontinent. You can improve the code from her as you need to.

samtun Over a year ago

I changed the objects data just giving them the numbers in an array conent: [1,2,3...], then looped through with content.append($('#box' + regions[region].content[o]).html()); this did the trick. I would like to post this as answer here, but I am not allowed due to a lack of reputation points right now. Anyway, if anyone has improvements to this, please tell me, I am still learning. Thanks to Francois, saw your edit right now, seems like that works too. great!

|

ylerjen · Accepted Answer · 2014-06-24 08:11:45Z

0

var $current = $(this);
    $.each(kontinent,function(idx,element){
      if ($current.attr('data-region') == element.name) {
                    content.append(element.content.html());
      }
    };

Notice that you can use append to keep your initial content without having to insert it again.

answered Jun 24, 2014 at 8:11

ylerjen

4,3082 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

jquery - html() of variable option with multiple elements?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related