Как можно создать объект с DOM элементами и присвоить им классы?

Question

[seregindev]

Доброго времени суток, сейчас столкнулся с такой задачей, я хочу переписать один скрипт, который будет позоционировать 'active_elem' относительно элемента который будет на странице
Первая версия как мне кажется не совсем корректная и её можно сократить, я решил сделать след. образом
Поместить все элементы в 1 объект и уже делать проверку по его элементам и в случае если проверка успешна, позиционировать

И начал переписывать, но скрипт отказывается работать
Вот первая версия кода

var activeElement = jQuery('.nav-horizontal .menu li a.active'),
      activeElementBlog = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-menu-item'),
      activeElementPost = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-post-ancestor'),
      activeElementCategory = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-category-ancestor')

  if (activeElement.length) {
    var positionActiveElement = activeElement.position().left,
        widthActiveElement = activeElement.width();
        jQuery('.active_elem').css({
                'width': widthActiveElement,
                'margin-left' : positionActiveElement
              })
  } else if (activeElementBlog.length) {
    var positionActiveElementBlog = activeElementBlog.position().left,
        widthActiveElementBlog = activeElementBlog.width();
        jQuery('.active_elem').css({
                'width': widthActiveElementBlog,
                'margin-left' : positionActiveElementBlog
              })
  } else if (activeElementPost.length) {
    var positionActiveElementPost = activeElementPost.position().left,
        widthActiveElementPost = activeElementPost.width();
        jQuery('.active_elem').css({
                'width': widthActiveElementPost,
                'margin-left' : positionActiveElementPost
              })
  } else if (activeElementCategory.length) {
    var positionActiveElementCategory = activeElementCategory.position().left,
        widthActiveElementCategory = activeElementCategory.width();
        jQuery('.active_elem').css({
                'width': widthActiveElementCategory,
                'margin-left' : positionActiveElementCategory
              })
  }
        else {
        jQuery('.active_elem').css({
                'width': 0
              })
      }

Вторая версия(которую пытаюсь заставить работать)

var activeElements = new Object();
    activeElements.main = jQuery('.nav-horizontal .menu li a.active'),
    activeElements.Blog = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-menu-item'),
    activeElements.Post = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-post-ancestor'),
    activeElements.Category = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-category-ancestor')

  for (var elementMenu in activeElements) {

    if (elementMenu.length) {
      var position = elementMenu.position().left,
          width = elementMenu.width();
    
      jQuery('.active_elem').css({
        'width' : width,
        'margin-left' : position
      })
    } else {
      jQuery('.active_elem').css({
              'width': 0
            })
    }
  }

Comments

[Stalker_RED]

Что эта штука должна делать? Если это выпадающее меню, почему оно должно позиционироваться при помощи js а не css?

[seregindev]

Stalker_RED: Данный скрипт отлавливает элемент с определённым классом, и в случае если условие выполняется перемещает к нему полузунок, такое обилие условий требуется для того чтобы отлавливать классы на дочерних страницах, к примеру, Блог
Я приложил скриншот, что из себя представляет ползунок

[Stalker_RED]

Не понимаю, что мешает сделать что-то вроде

.nav .active {
  border-bottom: solid 3px blue;
}

[seregindev]

Stalker_RED: Это сделано для того, чтобы ползунок плавно переезжал, от одного к другому

Answer 1

[Interface]

В заголовке вы задаете вопрос, а ниже на него отвечаете сами. Могу предположить что ваше решение не работает.
Выскажу 2 замечания:
1) такую конструкцию:

var activeElements = new Object();
    activeElements.main = jQuery('.nav-horizontal .menu li a.active'),
    activeElements.Blog = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-menu-item'),
    activeElements.Post = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-post-ancestor'),
    activeElements.Category = jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-category-ancestor')

можно заменить на более компактную:

var activeElements = {
    main: jQuery('.nav-horizontal .menu li a.active'),
    Blog: jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-menu-item'),
    Post: jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-post-ancestor'),
    Category: jQuery('.nav-horizontal .menu li.menu-item-type-taxonomy.current-category-ancestor')
}

Плюс в вашем коде надо заменить запятые на точку с запятой в конце. Но на работоспособность это повлиять не должно.

2-е замечание) цикл for-in ( https://developer.mozilla.org/ru/docs/Web/JavaScri... ) в цикле изменяет переменную ключ в объекте
Иными словами:

var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {console.log(i)} // выведет поочередно: [a,  b,  c], а не 1-2-3 как можно было подумать 
// чтобы это исправить, можно использовать такой подход:
for (var i in obj) {console.log( obj[i] )}; // 1, 2, 3

В вашем случае должно помочь:

...
for (var i in activeElements) {
    var elementMenu = activeElements[i];
    if (elementMenu.length) {
...