使用 jQuery，我只想在另一个未连接的 div 存在特定类时向 div 添加一个类答案

【问题标题】：Using jQuery I want to add a class to a div only WHEN another unconnected div exists with a specific class使用 jQuery，我只想在另一个未连接的 div 存在特定类时向 div 添加一个类
【发布时间】：2011-11-17 07:51:11
【问题描述】：

好的，基本上我有一个 Joomla 站点和一个水平的 jQuery 导航。我需要一个箭头（“#selector”）来指向活动的顶部导航。导航位于无序列表中。使用jquery，我通过分配具有适当的margin-left值的类来移动悬停时的箭头（我想要的），但是一旦我选择了该链接并且它成为活动的父级，我需要箭头留在那里直到它再次移动，因为悬停动作。

例如：

<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 解决方案的逻辑是：

当 .item-1.active EXIST $("#selector").css('margin-left', '20px');
WHEN .item-2.active EXIST $("#selector").css('margin-left', '45px');
WHEN .item-3.active EXIST $("#selector").css('margin-left', '70px');

...等等...

基本上这就是我为悬停效果所做的：

<script>

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

这是我的测试站点的 URL，以便您可以更好地了解我正在尝试做什么：http://trustmarkstaging.com

提前感谢您的帮助！ :)

【问题讨论】：

当.item-1.active存在时，你要修改什么对象？你的问题并不清楚。
对不起，我想修改#selector上的margin-left。

标签： jquery event-handling navigation

【解决方案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);

【讨论】：

这正是我想要的。我知道有办法做到这一点，我只是不确定如何去做。谢谢！

【解决方案2】：

您可以通过检查 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');

【讨论】：

【解决方案3】：

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;
}

EDIT大量更新，here is a working fiddle

如您所见，这很重。如果您可以在每个 li 中添加 id="item-1" 之类的内容，那么代码会轻松很多；)

它适用于任意数量的 li，而不仅仅是 3，它假定 css 文件为 .item-X-selector 获得了相应的“margin-left”。最后，它独立于活动状态，它假设悬停的 li 是活动状态。

如果你需要解释，尽管问；）

【讨论】：