Returning value from a jQuery method

Question

I am calling a method getSelectedIndex from a plugin Megalist, like this:

var selectedIndex = $('#left-list').megalist('getSelectedIndex');

However, instead of returning an integer, I get a jQuery object representing the list instead. I tried to call the method directly, both as

var selectedIndex = $('#left-list').getSelectedIndex();

and

var selectedIndex = $('#left-list').megalist().getSelectedIndex();

but then I get an error stating there is no method named getSelectedIndex. Inserting .eq(0) to isolate only the first jQuery object also didn't work. I tried googling for this, but these few pages don't seem to provide an answer. The method is defined as follows:

getSelectedIndex: function() {
    return parseInt(this.selectedIndex, 10);
},

and should return an integer. How can I just call the method to return an integer instead?

Update: It seems that doing something like this:

window.selectedIndex = -1;
// ...
function listChangeHandler( event ) { 
    // ...
    window.selectedIndex = event.selectedIndex;
    // ...
}

// ...

$('.favorite-link').on('click', function(){
    if (window.selectedIndex != -1)
    {
        if (window.favorites.indexOf(window.selectedIndex) == -1)
        {
            window.favorites.push(window.selectedIndex);
        }
    }
});

does the trick, however I would still want to know if this can be done without using global variables.

score 1 · Answer 1 · answered May 10 '13 at 13:24

1

When the plugin is initialised, no items are selected. Just bind a change handler to #left-list, you can get the selectedIndex from the event object:

$('#left-list').on('change', function(e) {
  var selectedIndex = e.selectedIndex;
});

Check the documentation

answered May 10 '13 at 13:24

billyonecan

20,090
8
42
64

Ah, but I was doing something like this: `$('.favorite-link').on('click', function(){ selectedIndex = $('#left-list').megalist('getSelectedIndex'); if (window.favorites.indexOf(selectedIndex) != -1) { window.favorites.push(selectedIndex); } });` Should I resort to using a global variable then? – Vilinkameni May 10 '13 at 13:30
I've updated the question with a workaround. I would still like to know if this could be done without using the global variables. – Vilinkameni May 10 '13 at 13:36

score 1 · Answer 2 · edited May 10 '13 at 14:37

When an item in the megalist has been selected, the class .megalistSelected is added to the list item so you could search for a <li> with that class using jQuery and get the value of its list-index attribute.

With the following megalist markup as an example:

   <div class="megalist" id="myList2">
         <ul style="visibility: visible; left: 0px; top: 0px;">
            <li class="megalistItem megalistSelected" list-index="1" style="left: 0px; top: 41px;">Decimal: 1, Hex: 1</li>
         </ul>
   </div>

Then...

$('#myList2').find('.megalistSelected').attr('list-index')

...will retrieve the index of the item (once an item has been selected of course).

Yes, that could work, but it still relies on implementation rather than the plugin interface. — Vilinkameni, May 10 '13 at 14:31

Returning value from a jQuery method

2 Answers2