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

Question

简单来说，这是我的 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>

现在，我的问题是当我使用这个 jQuery 代码时:

$nextStep = $('#continue-button').attr('next-step');    
$('#continue-button').attr('current-step', $nextStep);
$nextTemp = $('div.' + $nextStep).next('.tooltip').attr('step-name');
$('#continue-button').attr('next-step', $nextTemp);

$nextTemp 在 step1d 处停止。我该怎么做才能让 $nextTemp 读取其他 div 中的下一个 div.tooltip(step2、step3、step4 等)？

Answer 1

外部 Fiddle DEMO

我对您的 html 进行了一些更改，以使用有效的 html data-* 属性，如下所示，并检查内联注释:

$(".button").on('click',function(){
    var currentStep=$(this).data('current-step'); //get the current-step
    var $nextStep=$('.'+currentStep).next('.tooltip').length?$('.'+currentStep).next('.tooltip').data('step-name'):$('.'+currentStep).closest('.main-step').next('.main-step').find('div:first').data('step-name');
    //ternary operator if there is nextstep in current main-step then take it otherwise
    //go to its parent and get next main-step first div's step-name data attribute
    if(typeof $nextStep !=  'undefined') //check if it is undefined
    {
    	$(this).data('current-step', $nextStep);
	$nextTemp = $('div.' + $nextStep).next().length?$('div.' + $nextStep).next().data('step-name'):$('.'+$nextStep).closest('.main-step').next().find('div:first').data('step-name');
	typeof $nextTemp!='undefined'?$(this).data('next-step', $nextTemp):$(this).data('next-step', 'No more steps');
        //ternary operators again
    }
    $('.result').append("Current Step : " +$(this).data('current-step')+ " " + "Next Step :" +$(this).data('next-step') +"<br/>");
    //just to show what the results will be after each click.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step1 main-step">
    <div class="step1a tooltip" data-step-name="step1a" title="Step 1a" style="width: 25.000%;"></div>
    <div class="step1b tooltip" data-step-name="step1b" title="Step 1b" style="width: 25.000%;"></div>
    <div class="step1c tooltip" data-step-name="step1c" title="Step 1c" style="width: 25.000%;"></div>               
    <div class="step1d tooltip" data-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" data-step-name="step2a" title="Step 2a" style="width: 25.000%;"></div>            
    <div class="step2b tooltip" data-step-name="step2b" title="Step 2b" style="width: 25.000%;"></div>
    <div class="step2c tooltip" data-step-name="step2c" title="Step 2c" style="width: 25.000%;"></div>
    <div class="step2d tooltip" data-step-name="step2d" title="Step 2d" style="width: 25.000%;"></div>
</div> <!-- End of Step 2 -->

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

<div class='result'></div>