如何选择下一个没有特定 CSS 类的 div答案

【问题标题】：How to select the next div that does not have a certain CSS class如何选择下一个没有特定 CSS 类的 div
【发布时间】：2012-01-07 15:22:53
【问题描述】：

<div id="button">
Click me
</div>

<div id=item1> //loads with a dashed border
</div>

<div id=item2> //loads with a solid border
</div>

<div id=item3> //loads with a solid border
</div>

脚本部分：

var eventNext = document.getElementById("button");
eventNext.addEventListener("click", move, false);

function move()
{

}

我会在 move 函数中放入什么来获取下一个没有虚线边框的 div 项，并将其设为虚线，并将当前项的边框设为实线？（如果有下一个项目）？

【问题讨论】：

你知道 Javascript 库 jQuery 吗？如果没有，您可能想要使用它。它使在 Javascript 中做大多数事情变得更容易，掩盖了跨浏览器的不兼容性，因此您不必为它们编写特殊的代码，并且有大量有用的插件可以为您节省大量重新发明轮子的时间。值得注意的是，addEventListener 的行为因浏览器而异，而 the jQuery Event object 在不同浏览器之间是可靠的。
是否预定义了数字项 1、2、3、4 等？

之间的项目之间是否还有其他元素/文本？
仅供参考，如果您不想使用 jQuery，您可以使用与带有 Sizzle sizzlejs.com 的 jQuery 相同的复杂选择器，尽管您仍然会遇到 @ConspicuousCompiler 描述的问题。见stackoverflow.com/questions/3952817/decoupling-jquery-sizzle。从性能来看，最新版本的 CDN jQuery 可能已经在用户缓存中，无需使用“仅”Sizzle :)

标签： javascript html dom

【解决方案1】：

这是使用 jQuery 的一种方法，如果您恰好可以选择使用这个库：

首先，给每个可以变成虚线的div，一个“标记类”

<div id="item1" class="itemWhichCanBeDashed">
    //loads with a dashed border
</div>
<div id="item2" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>
<div id="item3" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>

然后创建虚线边框样式：

<style type="text/css">
    .dashed { border-style: dashed; }
</style>

然后，划线下一个尚未划线的 div：

$("div.itemWhichCanBeDashed:not(.dashed):first").addClass("dashed");

这会选择所有具有 itemWhichCanBeDashed 类的 div，但不是否附加了 dashed 类，然后取第一个，然后添加类 dashed

如果您希望第一个 div 已经用虚线显示，那么只需使用 dashed 类渲染它。

我不确定使当前 div 成为实体的确切要求是什么，但它应该是对此的简单扩展。

编辑

要在您的项目中托管 jQuery，您可以从 Google 链接到它：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

如果您的用户最近访问了链接到同一文件的网站，则该网站可能会被缓存。如果没有，它只有大约 92K 的下载量。

【讨论】：

【解决方案2】：

如果您使用像 jquery 这样的 js 框架，这会更容易。就像添加对您的 head 的引用一样简单，如下所示：

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;

使用jquery，代码将是

var lastChanged;

$(document).ready(function() {
    lastChanged = $('#item1');

    $('#button').click(function() {
        $(lastChanged).css("border", "1px solid #000");
        $(lastChanged).next().css("border", "1px dashed #000");
        lastChanged = $(lastChanged).next();
    }); 
});

这里是 jsfiddle - http://jsfiddle.net/JKYue/

【讨论】：

不确定谁对你投了反对票，但这个答案看起来不错。我认为我们都是讨厌 jQuery 答案的人的受害者，我在 +1 之前实际上已经看到了。

【解决方案3】：

var eventNext = document.getElementById("button");
eventNext.addEventListener("click", move, false);

function move() {
    if( eventNext ) {
        if( eventNext.id !== 'button' ) {
            eventNext.className = 'solidBorder';
        }
        eventNext = eventNext.nextElementSibling;
        if( eventNext ) {
            eventNext.className = 'dashBorder';
        }
    }
}

.dashBorder {
    border: 2px dashed blue;
}
.solidBorder{
    border: 2px solid blue;
}

或使用 jquery

var eventNext = $("#button").bind("click", move);

function move() {
    if( eventNext.length ) {
        if( eventNext.attr('id') !== 'button' ) {
            eventNext.attr( 'class', 'solidBorder' );
        }
        eventNext = eventNext.next();
        if( eventNext.length ) {
            eventNext.attr( 'class', 'dashBorder' );
        }
    }
}

如果您需要支持不支持 nextElementSibling 的浏览器，请改用此函数。

function next( elem ) {
    while( (elem = elem.nextSibling) && (elem.nodeType !== 1) );
    return elem;
}

【讨论】：

nextElementSibling 还不是跨浏览器安全的。
确实如此，但题中使用了addEventListener，而且大部分支持它的浏览器也支持nextElementSibling。
那是……不是真的。 addEventListener 被添加到 Firefox 1.0（实际上是之前）、Safari 1.0、Chrome 1.0、Opera 7 和 IE 9 中。nextElementSibling 被添加到 HTML5 中其中被释放。值得注意的是，它直到 3.5 才被添加到 Firefox 中。我在其他浏览器上找不到数据，但值得注意的是，这是一个警告。
@eyelidlessness - 我用一个代替它的函数更新了我的答案。但是当我说“大多数浏览器”时，我指的是大多数普遍支持的浏览器。如果您使用 jquery 支持的浏览器作为基础，并且仅限于支持 addEventListener 的浏览器，那么我很确定唯一的遗漏是 Firefox 3。不确定 Opera 9。

【解决方案4】：

看看这是否有助于你开始

  <button onclick="nextItem()">Click me</button>


  var nextItem = (function() {

   var arr_item, arr_len, intIdx, currentItemInt;

   arr_item = ["item1", "item2", "item3"];

    arr_len = arr_item.length;
    intIdx = -1;
    currentItemInt = "";

    return function(){

       for (var j= 0; j < arr_len; j++) {

          var elm = document.getElementById(arr_item[j]);
          var os = (elm.currentStyle) ? elm.currentStyle["borderStyle"] : window.getComputedStyle(elm,"").getPropertyValue('border-top-style');

          if(os == "dashed"){
            intIdx = j;
            //alert(j)
            currentItemInt = arr_item[j + 1];
          }
   }

// alert(arr_item[intIdx]) 

   if(intIdx < arr_item.length-1){

     document.getElementById(arr_item[intIdx]).style.border = "white dashed";
     document.getElementById(currentItemInt).style.border = "black dashed";

   }
}
}());

【讨论】：