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

Question

<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()
{

}

如果有下一个没有虚线边框的div项，那么在move函数中我需要放入什么代码才能将它变为虚线边框，并将当前项的边框变为实线边框？（如果存在下一个项）

- antonpug

---

你是否了解Javascript库jQuery？如果不了解，建议使用它。它可以让Javascript编程更加容易，避免编写特定浏览器的代码，同时还有很多有用的插件可以节省大量时间。值得注意的是，addEventListener在不同浏览器中的行为略有不同，而jQuery事件对象在各个浏览器中都是可靠的。 - Conspicuous Compiler

数字项目1、2、3、4等是否预定义？在项目<div></div>之间是否有其他元素/文本？ - david

请注意，您可以使用Sizzle（http://sizzlejs.com/）的复杂选择器，而不必使用jQuery，尽管您仍将遇到@ConspicuousCompiler描述的问题。请参见https://dev59.com/Q2865IYBdhLWcg3wKLX6。就性能而言，CDN jQuery的最新版本可能已经在用户缓存中，因此无需仅使用"Sizzle" :) - FelipeAls

Answer 1

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

- shredder

---

nextElementSibling 目前在跨浏览器兼容性方面还不够安全。 - eyelidlessness

没错，但问题使用 addEventListener，大多数支持它的浏览器也支持 nextElementSibling。 - shredder

那不是真的。addEventListener在Firefox 1.0（实际上更早）、Safari 1.0、Chrome 1.0、Opera 7和IE 9中添加。nextElementSibling是在HTML5中添加的，而当时大多数浏览器还没有意识到这一点。值得注意的是，在Firefox 3.5中才添加了它。我找不到其他浏览器的数据，但重要的是要注意这一点作为一个警告。 - eyelidlessness

@eyelidlessness - 我更新了我的答案，并提供了一个可替代的函数。但是，当我说“大多数浏览器”时，我指的是通常受支持的大多数浏览器。如果您以jquery支持的浏览器为基础，并限制为支持addEventListener的浏览器，则我相信唯一的遗漏可能是Firefox 3。不确定Opera 9。 - shredder

Answer 2

如果您可以使用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类，但未附加dashed类的div，然后取第一个，接着添加dashed类。如果您想让第一个div已经有虚线，请直接使用虚线类呈现它。我不确定使当前div变成实线的要求是什么，但这应该是这个简单扩展。编辑：要将jQuery托管在您的项目中，您可以从Google链接到它：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 如果您的用户最近访问了链接到相同文件的站点，则该文件很可能被缓存。否则，它只需要下载大约92K。

- Adam Rackis

Answer 3

如果你使用像jquery这样的js框架，这将会更容易。只需像这样在你的head中添加一个引用：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

使用 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/

- Jeremy Wiggins

---

不确定是谁给你点了踩，但这个回答看起来还不错。我想我们都是某个讨厌jQuery答案的人的受害者，我以前也见过这种情况。+1 从我这里。 - Adam Rackis

Answer 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";

   }
}
}());

- david