jQuery method not finding selector

Question

I am writing a simple jQuery function to pick up a selector from the html page and on keypress(up or down) should add a CSS class to it.

Problem is that it is not detecting the selector to add the class.

The HTML selector is nested deep into the code.

html
    body
        div.fixed-header
            div#main-nav.primary-nav.navbar
                div.navbar-inner
                    div.primary-nav-right-content
                        ul.nav
                             li#global-search
                                 div.search-results
                                      ul.search-dropdown
                                          ul.search-entry

I am trying to detect the selector ul.search-entry in my jquery.

What I have right now in my javascript is this.

var selector = $('ul.search-entry');
var selected;
$(window).keydown(function(e){
  if(e.which === 40){
      if(selected){
          selected.removeClass('selected');
          next = selected.next();
          if(next.length > 0){
              selected = next.addClass('selected');
          }else{
              selected = selector.eq(0).addClass('selected');
          }
      }else{
          selected = selector.eq(0).addClass('selected');
      }
  }else if(e.which === 38){
      if(selected){
          selected.removeClass('selected');
          next = selected.prev();
          if(next.length > 0){
              selected = next.addClass('selected');
          }else{
              selected = selector.last().addClass('selected');
          }
      }else{
          selected = selector.last().addClass('selected');
      }
  }
  else{
  }
});

I have been racking my head for too long and I know am missing something really small. Any thoughts?

if (selected), selected is never given a value. Do you want selector? — tymeJV
– tymeJV, Commented Nov 27, 2013 at 16:27
@tymeJV When if (selected) is true, selected already has a value, so it doesn't need to be given one again. — Barmar
– Barmar, Commented Nov 27, 2013 at 16:30
"Problem is that it is not detecting the selector to add the class." What did you do to find out that no element is selected? Did you read the jQuery tutorial? "To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event" — Felix Kling
– Felix Kling, Commented Nov 27, 2013 at 16:31
Your question may be exposing a misunderstanding. ul.search-entry is a selector, $("ul.search-entry") is a jQuery collection of the elements that match the selector. — Barmar
– Barmar, Commented Nov 27, 2013 at 16:36

Barmar · Accepted Answer · 2013-11-27 16:38:58Z

2

Set selector to just the selector string, not the collection that results, and call jQuery to search for it when needed.

var selector = 'ul.search-entry';
var selected;
$(window).keydown(function(e){
  if(e.which === 40){
      if(selected){
          selected.removeClass('selected');
          next = selected.next();
          if(next.length > 0){
              selected = next.addClass('selected');
          }else{
              selected = $(selector).eq(0).addClass('selected');
          }
      }else{
          selected = $(selector).eq(0).addClass('selected');
      }
  }else if(e.which === 38){
      if(selected){
          selected.removeClass('selected');
          next = selected.prev();
          if(next.length > 0){
              selected = next.addClass('selected');
          }else{
              selected = $(selector).last().addClass('selected');
          }
      }else{
          selected = $(selector).last().addClass('selected');
      }
  }
  else{
  }
});

answered Nov 27, 2013 at 16:38

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhi Over a year ago

Yes! This did it. I cannot believe it was this simple

Abhi Over a year ago

Just did that. Thanks Felix.

Collectives™ on Stack Overflow

jQuery method not finding selector

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related