ember: manipulate the DOM (like hide a long list of items)

I'm new to ember. I have a demo app working, and I'm moving towards making it look nice.

One issue I'm starting to grapple with is how to manipulate DOM elements. Coming from a server-side world, it's been pretty easy to just throw some jquery at stuff like this. Doesn't appear to be as straightforward in ember. But I'm probably missing something or approaching it wrong.

The immediate problem is: I have a list of 40-some <li> elements and I want to create a toggle to show/hide the list after the first 10 items.

I got something to work in my component like this:

import Ember from 'ember';

let $ = Ember.$;

export default Ember.Component.extend({ 

    didInsertElement() {
        this._super(...arguments);
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },

    afterRenderEvent() {
        let listTotal = $("#myList li").length;
        $("#myList li").slice(10, listTotal).hide();        
    }
});

The problem is that when actions trigger and the view is re-rendered, afterRenderEvent() doesn't get called again, and the list shows in its entirety.

Is there a way to get around this? OR, is there a more "ember" way to approach this problem (and DOM manipulation in general)?