Multidimensional Array from HTML using jquery

Question

I have repeating div's down a page. I need to select the outerbox ID's and text element

<div class="outerbox" id="12345">

        <div class="headerbox" id="title12345">

            <div class="text">&nbsp;</div>
            <h2>Foo Bar
            </h2>
        </div>

I need to create a multi-dimensional array using jquery

I have it this far with creating a single array for the outerbox ID's

var boxids = $('.outerbox').map(function() { return this.id; }).get();
var boxidsLength = boxids.length;

var i = 0; i < boxidsLength; i++) {
    alert (boxids[i])
}

But I'm having difficulty wrapping my head around the process of how 1) I'd create a multi-dimensional array from this input and how to 2) select the element under class 'text'

The array would look like

Foo Bar | Bar Foo

12345   | 67890

etc

Thank you

Answer 1

Edit, Updated

Try

var boxids = $('.outerbox').map(function() { 
  return [[$.trim($(".text + *", this)[0].innerText), this.id]] ; 
}).get();

var boxids = $('.outerbox').map(function() { 
  return [[$.trim($(".text + *", this)[0].innerText), this.id]] ; 
}).get();
$("body").text(boxids);
console.log(boxids);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outerbox" id="12345">

        <div class="headerbox" id="title12345">

            <div class="text">&nbsp;</div>
            <h2>Foo Bar
            </h2>
        </div>
    
    <div class="outerbox" id="67890">

        <div class="headerbox" id="title678905">

            <div class="text">&nbsp;</div>
            <h2>bar foo
            </h2>
        </div>

Answer 2

I think this should work:

var array = [];
$('.outerbox').each(function ()
{
    var id = this.id;
    var text = $(this).find('.text').next().text();

    array[text] = id;
});

But maybe you need to sanitize the text, to trim spaces and line breaks.