Javascript jQuery下一个DIV，具有驻留在另一个DIV中的特定类

简而言之，以下是我的HTML代码：

<div class="step1 main-step">
    <div class="step1a tooltip" step-name="step1a" title="Step 1a" style="width: 25.000%;"></div>
    <div class="step1b tooltip" step-name="step1b" title="Step 1b" style="width: 25.000%;"></div>
    <div class="step1c tooltip" step-name="step1c" title="Step 1c" style="width: 25.000%;"></div>               
    <div class="step1d tooltip" step-name="step1d" title="Step 1d" style="width: 25.000%;"></div>
</div> <!-- End of Step 1 -->

<div class="step2 main-step">
    <div class="step2a tooltip" step-name="step2a" title="Step 2a" style="width: 25.000%;"></div>            
    <div class="step2b tooltip" step-name="step2b" title="Step 2b" style="width: 25.000%;"></div>
    <div class="step2c tooltip" step-name="step2c" title="Step 2c" style="width: 25.000%;"></div>
    <div class="step2d tooltip" step-name="step2d" title="Step 2d" style="width: 25.000%;"></div>
</div> <!-- End of Step 2 -->

<a href="#" current-step="step1a" next-step="step1b" class="button" id="continue-button">Continue</a>

---

$nextTemp在步骤1d停止。我该怎么做才能让$nextTemp从其他div（步骤2、步骤3、步骤4等）读取下一个div.tooltip？

我解决了循环div的问题，而不是直接获取它

$( "#continue-button" ).click( function() {
    $nextStep = $('#continue-button').attr('next-step');    
    $('#continue-button').attr('current-step', $nextStep);

    var foundDiv = false;
    $( ".tooltip" ).each( function() {
        if( foundDiv ) {
            $nextTemp = $( this ).attr( "step-name" );
            foundDiv = false;
        } else {
            if( $( this ).attr( "step-name" ) == $nextStep ) {
                foundDiv = true;
            }
        }
    });
    $('#continue-button').attr('next-step', $nextTemp);
});

---

我解决了骑自行车的问题，而不是试图直接得到它

$( "#continue-button" ).click( function() {
    $nextStep = $('#continue-button').attr('next-step');    
    $('#continue-button').attr('current-step', $nextStep);

    var foundDiv = false;
    $( ".tooltip" ).each( function() {
        if( foundDiv ) {
            $nextTemp = $( this ).attr( "step-name" );
            foundDiv = false;
        } else {
            if( $( this ).attr( "step-name" ) == $nextStep ) {
                foundDiv = true;
            }
        }
    });
    $('#continue-button').attr('next-step', $nextTemp);
});

外部

我对您的

html

做了一些更改，以使用有效的

html数据-*属性，如下所示，并检查内联注释：


$（“.button”）。在（'click'，function（）上{
var currentStep=$（this）.data（'current-step'）；//获取当前步骤
var$nextStep=$（'.+currentStep.）.next（'.tooltip'）.length？$（'.+currentStep.）.next（'.tooltip'）.data（'step-name'）：$（'.+currentStep'）.next（'.main step'）.find（'div:first'）.data（'step-name'）；
//三元运算符如果当前主步骤中有下一步，则执行其他步骤
//转到其父级并获取下一个主步骤first div的步骤名称数据属性
if（typeof$nextStep！=“undefined”）//检查它是否未定义
{
$（this）.data（'current-step'，$nextStep）；
$nextTemp=$（'div.+$nextStep）.next（）.length？$（'div.+$nextStep）.next（）.data（'step-name'）：$（'.+$nextStep）.next（）.find（'div:first'）.data（'step-name'）；
$nextTemp！='undefined'？$（this）.data（'next-step'，$nextTemp）：$（this.data（'next-step'，'No-more steps'）；
//三元算子
}
$（'.result'）.append（“当前步骤：+$（此）.data（'Current-Step'））+”“+”下一步：“+$（此）.data（'Next-Step'）+”
）；
//只是为了显示每次单击后的结果。
});

外部

我对您的
html
做了一些更改，以使用有效的
html数据-*属性，如下所示，并检查内联注释：


$（“.button”）。在（'click'，function（）上{
var currentStep=$（this）.data（'current-step'）；//获取当前步骤
var$nextStep=$（'.+currentStep.）.next（'.tooltip'）.length？$（'.+currentStep.）.next（'.tooltip'）.data（'step-name'）：$（'.+currentStep'）.next（'.main step'）.find（'div:first'）.data（'step-name'）；
//三元运算符如果当前主步骤中有下一步，则执行其他步骤
//转到其父级并获取下一个主步骤first div的步骤名称数据属性
if（typeof$nextStep！=“undefined”）//检查它是否未定义
{
$（this）.data（'current-step'，$nextStep）；
$nextTemp=$（'div.+$nextStep）.next（）.length？$（'div.+$nextStep）.next（）.data（'step-name'）：$（'.+$nextStep）.next（）.find（'div:first'）.data（'step-name'）；
$nextTemp！='undefined'？$（this）.data（'next-step'，$nextTemp）：$（this.data（'next-step'，'No-more steps'）；
//三元算子
}
$（'.result'）.append（“当前步骤：+$（此）.data（'Current-Step'））+”“+”下一步：“+$（此）.data（'Next-Step'）+”
）；
//只是为了显示每次单击后的结果。
});

你是如何得到的
$nextStep
看起来你把它复杂化了。为什么不使用一个公共类，然后遍历匹配集以获得下一个？顺便说一句，不要使用无效的HTML属性，使用
data-*
而不是$nextStep=$（“#继续按钮”）.attr（'next-step'）；如何获得
$nextStep
看起来您将其过度复杂化了。为什么不使用一个公共类，然后遍历匹配集以获得下一个？顺便说一句，不要使用无效的HTML属性，使用
data-*
而不是$nextStep=$（“#继续按钮”）.attr（'next-step'）；