[jQuery] Re: Appending content in order

Mon, 11 Feb 2008 11:54:10 -0800

Indeed, a good example would be the best way to explain.

<fieldset id="thefilter" class=" collapsible"><legend>Criteria</legend>

<div id=qz-criteria>

	<div class=qz-tablefield><div class="form-item">
	 <div id=h_table>Table</div> <div id=h_field>Field</div> <div id=h_value>Value</div>
  
	</div>
</div>
<div class="qz-tablefield">
	<div class="form-item">
	 <select name="table[]" class="form-select edit-table" id="edit-table[]" ><option value="0">Select a table</option><option value="1">incidents</option><option value="3">qualify</option><option value="2">technical</option><option value="9">criticalities</option><option value="5">groups</option><option value="7">origins</option><option value="6">positions</option><option value="8">priorities</option><option value="4">reasons</option><option value="10">status</option></select>
	</div>
	
	<div class="form-item">
	 <select name="field[]" class="form-select edit-field" id="edit-field[]" ><option value="0">Select a table</option></select>
	</div>

	<div class="form-item">
	 <select name="value[]" class="form-select edit-value" id="edit-value[]" ><option value="0">Select a field</option></select>
	</div>

	<div class=form-item><img src="/drupal/themes/test/pic/ico_proximo.png" id="new-criteria" border="0" align="absmiddle">New criteria
	</div>
</div>

</fieldset>
  

the brighter blue, is the cloned in question.  How to control the order it will be inserted/appended?


the relevant jQuery is:
    $("#thefilter img#new-criteria").click(function(){
        $last = $('#thefilter .qz-tablefield:eq(1)') // clone the first qz-tablefield that contain what we want, the eq(0) is the header
            .clone(true);

        $last
            .appendTo($('#thefilter')) // append to parent, #thefilter, but need to insert after the one we click, not the bottom
            .hide()
            .fadeIn('medium') // just some flowers
            .find('.clean-criteria')
            .trigger('click'); // clear all inputs to be filled by user
    });

I think thats enough. I dont want to avalanche with irrelevant code.

TIA!!

Feijó


Karl Swedberg escreveu:
Hi again. :)

This should help you understand what :eq() does:


"Matches a single element by its [zero-based] index."

I'm sure we can achieve what you're trying to do, but it's hard for me to help without being able to at least see the HTML. As it is, I don't know what .qz-tablefield is, for example. Can you point me to a web page or even just provide an HTML snippet? 

Thanks,

--Karl
_________________
Karl Swedberg

On Feb 11, 2008, at 3:07 PM, Feijó wrote:

Hi Karl,


Its a bit more confunsing, I simplified too much

In my div, I change a value from a <select>

that triggers a code that clone the <select> parent (the div)

If I do that a few times, every new div goes to the bottom

I do not know what eq() is!! there is a function that return that?

Here is a sample of current code:


    $("#thefilter img#new-criteria").click(function(){
        $last = $('#thefilter .qz-tablefield:eq(1)')
            .clone(true);

        $last
            .appendTo($('#qz-criteria'))
            .hide()
            .fadeIn('medium')
            .find('.clean-criteria')
            .trigger('click');
    });

my <select> triggers that event.  How to adjust with your suggestion?
Feijó


Karl Swedberg escreveu:

Hi Feijó,

you could try this ...

$('div.main > div.sub:eq(2)').after('<div class="sub"></div>');

That should insert your new div after the 3rd one.

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Feb 11, 2008, at 2:25 PM, Feijó wrote:

consider that html:

<div class=main>
    <div class=sub></div>
    <div class=sub></div>
    <div class=sub></div>
    <div class=sub></div>
    <div class=sub></div>
</div>


I need to append a new <div class=sub></div> as the 2nd, 3rd, middle, etc.
Append() add after the last one.

How can I do that? Its possible?



Thanks
Feijó

Reply via email to