Fetching div class ids inside parent div and turning into an array? Tough Stuff?

So I've been working on this the past 3 days, not too familiar with the .map function. What I'm trying to do is ( find or fetch ) all the ids onclick from a specified class on divs inside of a parent div... Example below:

<div id="parentDiv">
    <div class="fetch" id="post1" rel="1"></div>
    <div class="fetch" id="post2" rel="2"></div>
    <div class="fetch" id="post3" rel="3"></div>
    <div class="fetch" id="post4" rel="4"></div>
    <div class="fetch" id="post5" rel="5"></div>
</div>

Here is the function I've coded so far... it does work and finds ids inside the div "parentDiv" but after it finds the div the function stops. I'm certain than an array would work for this. Basically, When a user click a link, .attr(id) is fetched from that link and a div is opened up inside the "parentDiv" and when a user clicks anoth开发者_如何学Pythoner link... I want the script to check if that ID# has already been used ( find all ids inside parentDiv and check against them ).

var arr = $(".fetch [rel]").map(function() {
    if ( id == arr ) {
        console.log( arr );
        $createDiv = 'nope';
    } else {
        $createDiv = 'yup';
    }
    return this.id;
});

I've also coded this little piece that still doesn't work right:

$("div.fetch").each(function(id, value) {
console.log('div.fetch' + id + ':' + $(this).attr('rel'));
var statusId = $(this).attr('rel').serializeArray();
alert(statusId);

        if ( $.inArray( id , statusID ) ) {
            $createTab = 'nope';

        } else {
            $createTab = 'yup';
        }
});

The problem I'm having is its not blocking the id#s the .map function finds... Not switching back to it and prevents other new id#s from being opened.

I hope I provided enough info on explaining my problem.

I've updated the structure the same way I have coded it on my site.

---

Not exactly sure what you're trying to do, but maybe I did get it:

HTML:

<div id="parentDiv">
    <div class="fetch" id="post346">asdf</div>
    <div class="fetch" id="post21">asdf</div>
    <div class="fetch" id="post471">asdf</div>
    <div class="fetch" id="post32">asdf</div>
    <div class="fetch" id="post178">asdf</div>
</div>

Javascript:

var regex = /\d+$/,
    IDs = $('#parentDiv .fetch').toArray().map(function(e){
        return parseInt(e.id.match(regex));
    });

// now let's say you want to add these divs: 346 ,232, 178
var divsToCreate = [346,232,178];

$.each(divsToCreate, function(i,e)
{
    if ( $.inArray(e, IDs) != -1 )
        $('#post' + e).addClass('selected');
    else
        $('#parentDiv').append($('<div />', {
            class: 'fetch',
            id: 'post' + e,
            text: e
        }));
});

http://jsfiddle.net/QGRrs/6/

Note: IDs cannot start with a number: http://css-tricks.com/28-ids-cannot-start-with-a-number/

---

var getDivIDS = function(papadiv) {
    var div_ids = [];
    papadiv.find('>div').each(function() {
        div_ids.push($(this).attr('id'));
    });
    return div_ids;
}

var mydivids = getDivIDS($('#parentdiv'));

If I understood your question correctly that will return a list of ids of all first-children divs inside a element.

However I don't quite fully understand your explanation of your goal, and I feel there's probably a better solution than doing it this way.

Edit: Ok so if I understand this right:

var doAction(id) {
    $('#parentDiv div.selected').removeClass('selected'); //If using a selected class else ignore this line
    if ($('#'+id).length) {
        $('#'+id).addClass('selected'); //or .show() or .highlight() found it as existing
    } else {
        $('#parentDiv').append($('<div><\/div>', {'class': 'fetch', id: id})); //Not found make a new one
    }
}

//Inside click or wherever
doAction(id_to_look_for);

Is that what you're looking for?