Используя jQuery, я хочу добавить класс в div только тогда, когда существует другой неподключенный div с определенным классом.

Question

Хорошо, так что в основном у меня есть сайт Joomla и горизонтальная навигация jQuery.Мне нужна стрелка ("#selector"), чтобы указать на активную верхнюю навигацию.Nav находится в неупорядоченном списке.Используя jquery, я перемещаю стрелку при наведении курсора (которую я хочу), назначая класс с соответствующим значением margin-left, но затем, когда я выбираю эту ссылку и она становится активным родителем, мне нужна стрелка, чтобы оставаться там до тех пор, пока она не переместится снова из-заhover action.

Так, например:

<style>
#nav li {
list-style: none;
display: inline;
}
#nav_arrow .item-2-selector {
margin-left: 45px!important;
}
</style>

<ul id="nav">
    <li class="item-1 active">Page 1</li>
        <ul>
            <li>SubPage1</li>
            <li>SubPage2</li>
            <li>SubPage3</li>
        </ul>
    <li class="item-2">Page 2</li>
    <li class="item-3">Page 3</li>
    <li class="item-4">Page 4</li>
</ul>

 <div id="nav_arrow">
  <div id="selector" class="position"><img src="nav_current.png"/></div>
</div>

Моя логика, для которой я надеялся найти решение для jQuery, была:

WHEN .item-1.active EXIST $ ("# селектор"). Css ('margin-left', '20px');WHEN .item-2.active EXIST $ ("# селектор"). Css ('margin-left', '45px');WHEN .item-3.active EXIST $ ("# селектор"). Css ('margin-left', '70px');

... и т.д ...

В основном это то, что я делаю для эффекта наведения:

<script>

$(document).ready(function(){
$(".item-466").mouseover(function(){
 $("#selector").addClass("item-2-selector");
 });
});
</script>

и вот URL моего тестового сайтачтобы вы могли лучше видеть, что именно я пытаюсь сделать: http://trustmarkstaging.com

Заранее спасибо за любую помощь!:)

Answer 1

Путь грубой силы таков:

var marginLeft;
if ($(".item-3.active").length > 0) {
    marginLeft = "70px";
} else if ($(".item-2.active").length > 0) {
    marginLeft = "45px";
} else if ($(".item-1.active").length > 0) {
    marginLeft = "20px";
} else {
    marginLeft = 0;
}

$("#selector").css("margin-left", marginLeft);

Мне было неясно, может ли быть активным более одного элемента, поэтому я проверяю их в обратном порядке (в поисках активного элемента с наибольшим номером).

Более элегантный и расширяемый метод, который будет работать для любого количества элементов, может выглядеть примерно так:

var marginLeft = 0;
var active = $("#nav li.active:last");
if (active.length > 0) {
    marginLeft = ((active.index() * 25) + 20) + "px";
}
$("#selector").css("margin-left", marginLeft);

Answer 2

var itemsClasses = getItemClasses('#nav li');
var allClasses = itemsClasses.join('-selector ') + '-selector';

console.log(allClasses);
$("#nav li.active").mouseover(function(){
    var itemClass = getItemClasses(this)[0];
    //console.log(itemClass);
    if (itemClass != undefined) {
        $("#selector").removeClass(allClasses).addClass(itemClass+'-selector');
        console.log($("#selector").attr('class'));
    }
});

function getItemClasses(thing) {
    var itemsClasses = [];
    $(thing).each( function () {
        var classAttr = $(this).attr('class');
        if (classAttr != undefined) {
            var itemClasses = classAttr.split(' ');
            for (var i in itemClasses) {
                if ( itemClasses[i].indexOf('item') == 0 ) {
                    itemsClasses.push(itemClasses[i]);
                }
            }
        }
    });
    return itemsClasses;
}

РЕДАКТИРОВАТЬ сильно обновлено, а здесь - рабочая скрипка

, как вы видите, это тяжело.Если вы можете добавить что-то вроде id="item-1" к каждому li, код будет на тонну легче;)

Он работает для любого числа li, а не только для 3, и предполагает, что файлы css получили соответствующее "поле"-left для .item-X-селектор.Наконец, он не зависит от активного состояния, он предполагает активный лив является активным.

если вам нужны объяснения, просто спросите;)

Answer 3

Вы можете проверить, существует ли элемент в jQuery, проверив свойство length объекта jQuery.Например:

if($('.item-1.active').length > 0) $("#selector").css('margin-left', '20px');
if($('.item-2.active').length > 0) $("#selector").css('margin-left', '45px');
if($('.item-3.active').length > 0) $("#selector").css('margin-left', '70px');