Question

Ok relevant HTML:

<div rel="" id="CartridgeDisplays" class="category section ">
    <h3 class="categoryTitle parent">Cartridge Displays</h3>                
</div>

<div rel="" id="ColdCastBronzeresinFigurines" class="category section ">
    <h3 class="categoryTitle">Cold Cast Bronze resin Figurines</h3>             
</div>

<div rel="CartridgeDisplays" id="Collectableitems" class="category section child">
    <h3 class="categoryTitle">Collectable items</h3>                
</div>

<div rel="CartridgeDisplays" id="CommercialDisplaysandClocks" class="category section child">
    <h3 class="categoryTitle">Commercial Displays and Clocks</h3>               
</div>

And this jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        $('.child').appendTo($('# + $(this).attr('rel') + '));
    }); 
</script>

So what i want to happen is on page load, is all the DIV’s with a class of ‘child’ to be appended to the DIV that has the same id as the class:child DIV’s rel attribute. Can anyone help with this?

Answer 1

Your string concatenation is wrong. It should be: '#' + $(this).attr('rel'). And you’ll need to put it in a call to .each().

$('.child').each(function() {
    $(this).appendTo('#' + $(this).attr('rel'));
});

Explanation: in your code, $(this) refers to the document. In order to refer to the .child div, you need to iterate through them.