正在从元素中获取下一个className

Getting next className from elements

本文关键字：获取 下一个 className 元素      更新时间：2023-09-26

我有一个html:的示例块

<div class="container">
  <div class="item first">...</div>
  <div class="item second">...</div>
  <div class="item third">...</div>
  <div class="item fourth">...</div>
</div>

我想运行这个块，获得每个项目的当前类以及下一个项目的类，这是我正在尝试的，但this.nextSibling.className总是undefined:

$(".container > .item").each(function(){
  var context = $(this);
  context.text("this is " + this.className + ' next one is ' + this.nextSibling.className);
});

我该怎么做？

这是一个小提琴

下一个同级是div之间的空白填充文本节点，而不是下一个div。

请改用nextElementSibling或jQuery的next。

这是因为代码中的nextSibling是不具有className属性的textNode。您应该使用nextElementSibling或jQuery next方法。 
this.nextElementSibling.className;
context.next().prop('className');

您可以使用点击的元素上下文和jquery .next()来针对每次迭代中的下一个元素：

$(".container > .item").each(function(){
  var context = $(this);
  context.text("this is " + $(this).attr('class') + ' next one is ' + $(this).next().attr('class'));
});

工作演示

您可以使用next（）函数：这是小提琴

$(".container > .item").each(function(){
        var context = $(this);
        context.text("this is " + this.className + ' next one is ' + context.next().attr('class'));
    });

这是您的代码

$(".container > .item").each(function(){
            var context = $(this);
            var nextClassName = $(this).next().attr('class');
            context.text("this is '" + this.className + "' next one is '" + nextClassName +"'");
        });

更新的JS Fiddlehttp://jsfiddle.net/1y6do3bk/4/

试试这个：

$(".container > .item").each(function(){
        var context = $(this);
        context.text("this is '" + this.className + "' next one is '" + context.next().attr('class') +"'");
    });

最后一个仍然是"未定义的"，但这是意料之中的。。。

相关文章：