Exclude first child

[yuraloginoff]

I need to exclude first option element from select before render().
I have:

<select id="activities">
    <option>Choose one...</option>
    <option class="activity"></option>
</select>

JS code is:

var activities = [
    {activity: 'Jogging'},
    {activity: 'Gym'},
    {activity: 'Sky Diving'}
];

$('#activities').render(activities);

The output is:

<select id="activities">
    <option>Choose one...</option>
    <option class="activity">Jogging</option>

    <option>Choose one...</option>
    <option class="activity">Gym</option>

    <option>Choose one...</option>
    <option class="activity">Sky Diving</option>
</select>

Of course it's not what i need. I need the following:

<select id="activities">
    <option>Choose one...</option>
    <option class="activity">Jogging</option>
    <option class="activity">Gym</option>
    <option class="activity">Sky Diving</option>
</select>

Please give me an advise what i'm doing wrong.
Thanks in advance!

[yuraloginoff]

Of course I can filter through the items:

$('#activities')
    .children()
    .filter(function (index) {
        if ( index !== 0 && index % 2 === 0 ) return $(this);
    })
    .remove();

But is there any better way to so this?

[grimaldodev]

Replace all the options with an object content, difference the first element adding the attribute value

that will be an option:

var activities = [
    {activity: 'Choose activty'},
    {activity: 'Jogging'},
    {activity: 'Gym'},
    {activity: 'Sky Diving'}
];

var directives = {
    'activity': {
      'html' : function(){ 
       return this.activity;
      },
      'value' : function(){
       if(this.activity !== 'Choose activty'){
        return this.activity;
       }
      }
    }
};

$('#activities').render(activities, directives );

[flaviolaino]

Same issue here.
@ivangrimaldo solution can't help me.

I have this pagination template:

<ul class="pagination">
	<li>
		<a href="?page=-1" class="paginator-page-link-prev">&laquo;</a>
	</li>
	<li class="paginator-page active">
		<a href="?page=1" class="paginator-page-link">1</a>
	</li>
	<li>
		<a href="?page=+1" class="paginator-page-link-next">&raquo;</a>
	</li>
</ul>

How can I exclude first and last <li> element from render?

[grimaldodev]

Hi @flaviolaino sorry for delay.

DO you have a plunkr with your code to check how It works please, will be useful.

[flaviolaino]

@ivangrimaldo
https://jsfiddle.net/derwke3a/1/

[grimaldodev]

Still having problems?

[flaviolaino]

@ivangrimaldo uh?
Why? What has changed?
Do you see the fiddle?

[grimaldodev]

I mean did you resolve it? jojo

[dlibanori]

@flaviolaino Choose one should not be part of template. Or you put it at your JSON and render it, or preserve it into de HTML but do not capture it when calling render

[flaviolaino]

@dlibanori can I not capture some element when calling render? How?

[dlibanori]

@flaviolaino change your query

[flaviolaino]

@dlibanori what do you mean?
Can I exclude internal element when calling render function?

[dlibanori]

@flaviolaino I was thinking that render just valid pages would be easier but I'm wrong. The second option you have is just to render first and last page as one of your data. I can't see why this wouldn't work for you. Actually, I think this should be best option cause you may need to change your <li> class when user pick the first/last page. May you explain why do you think it doesn't work for you?