Почему .css() возвращает неверные данные?

Question

[Евгений Журов]

История вот в чем. Есть примерно такое многоуровневое меню:

<ul class="header__menu">
  <li class="header__menu__item"><a class="prevDef" href="#">Название пункта</a>
    <ul class="header__submenu_1">
      <li class="header__submenu_1__item"><a class="prevDef" href="http://path1">Название подпункта первого уровня</a>
        <ul class="header__submenu_2">
          <li class="header__submenu_2__item"><a href="http://path2">Название подпункта второго уровня</a></i>
            <ul class="header__submenu_3">
              <li class="header__submenu_3__item"><a href="http://path3">Название подпункта третьего уровня</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Таких пунктов и подпунктов очень много.
У тега с классом .header__submenu_1__item есть прямой потомок - тег "a". У каждого из таких "a" (допустим, их 20 на странице) свой уникальный цвет border-color, прописанный в css посредством nth-child().

Далее - необходимо получить текущий адрес какой-нибудь внутренней страницы в виде строки (внутренних страниц около 50, например), сравнить этот адрес с атрибутами href всех пунктов меню. Когда совпадение найдено, получить значение css - border-color того тега "а", который является родителем ссылки, href которой совпадает с текущим url.
Я написал следующее:

var currentpage = document.location.href;
var subpage = currentpage.split('.ru')[1]; // Вырезаем часть адреса после адреса домена
var allLinks = $(".header__menu").find("a"); // Собираем в кучу все ссылки внутри меню
$.each(allLinks, function() { // Проходимся циклом и сравниваем строки
     if ($(this).attr("href").split('.ru')[1] === subpage) {
            // Когда совпадение найдено, пытаемся получить значение этого несчастного border-color
            var currentPageColor = $(this).parents(".header__submenu_1__item").children("a").css("border-color");
            console.log(currentPageColor);
        }

Самое смешное, что в консоли - не значение border-color искомого тега "a", а значение color его родителя - тега с классом header__submenu_1__item. Что это за чертовщина, и как это победить?

P.S. даже не спрашивайте, зачем все эти извращения, но ооочень надо! :)
P.P.S. прошу прощения, всё-таки напутал, когда объяснял. Выше в тексте выделил жирным исправленный текст.

Comments

[Сергей]

Я не спец, но я проверил бы 2 момента:
В 5 и 7 строке проверить контекст т. е. this, но тут вроде всё нормально
$(this).parents(".header__submenu_1__item").children("a") - это странно

[Евгений Журов]

Graff46: а что именно странно? Дело в том, что если в консоль вывести переменную, убрав из нее .css("border-color"), ну то есть вывести именно элемент, а не его css-свойство, то выводится все правильно - именно то, что и должно выводиться.

[Сергей]

Евгений Журов: странное применение $.each

[Евгений Журов]

Graff46: хм, вполне может быть. А как было бы правильнее?

[Сергей]

Евгений Журов: Может такое

Answer 1

[Сергей]

Смею предположить, что:

var currentpage = document.location.href;
var subpage = currentpage.split('.ru')[1]; // Вырезаем часть адреса после адреса домена
var allLinks = $(".header__menu").find("a"); // Собираем в кучу все ссылки внутри меню
allLinks.each( function(indx, dom_obj) { // Проходимся циклом и сравниваем строки
     if ($(dom_obj).attr("href").split('.ru')[1] === subpage) {
            // Когда совпадение найдено, пытаемся получить значение этого несчастного border-color
            var currentPageColor = $(dom_obj).css("border-color");
            console.log(currentPageColor);
})