JQuery 比较列表项的类

Question

使用 JQuery 我想检查每个列表项是否有 css 类Complete。如果是这样，我想显示一个按钮，如果不是我想隐藏该按钮。

这些类当前是在页面加载时使用 PHP 动态插入的。

到目前为止我的代码是；

<button id="steps-complete" hidden>Download Now</button>

<ul class="wb-steps">

    <li class="<?php echo $class ?>">Step 1</li>

    <li class="<?php echo $class ?>">Step 2</li>

    <li class="<?php echo $class ?>">Step 3</li>

</ul>

<script>

jQuery( document ).ready(function() {

    var steps = [];

    jQuery( ".wb-steps li" ).each(function( index ) {

        // successfully displays complete for each list item

        console.log( index + ": " + jQuery( this ).attr('class') );

        // if all stepa have 'complete' show button

        $("#steps-complete").show();

    });

});

</script>

Answer 1

你有$class变量，它的值被设置为所有列表项的类。由于您正在使用 PHP 呈现页面，因此您可以使用相同的变量来测试是否应显示按钮。所以在这种情况下你不需要 jQuery，你可以删除那部分。这是它的样子：<?phpif (strpos($class, 'Completed') !== false) {?><button id="steps-complete" hidden>Download Now</button><?php}?>这适用于您的情况，因为您为所有项目设置了相同的类。希望这可以帮助。

Answer 2

我已经创建了一个函数来检查是否有一个名为 john 的类的孩子wb-steps，如果没有，那么我们将显示完成的步骤jQuery( document ).ready(function() {&nbsp; &nbsp; if($(".wb-steps").children().not('.john').length = 0){&nbsp; &nbsp; &nbsp; &nbsp; console.log("there was a div found with a class named john");&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; $("#steps-complete").show();&nbsp; &nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="steps-complete" hidden>Download Now</button><ul class="wb-steps">&nbsp; &nbsp; <li class="<?php echo $class ?>">Step 1</li>&nbsp; &nbsp; <li class="<?php echo $class ?>">Step 2</li>&nbsp; &nbsp; <li class="<?php echo $class ?>">Step 3</li></ul>

Answer 3

您可以简单地计算元素以查看它们是否都具有类complete：jQuery(document).ready(function() {&nbsp; &nbsp; var $steps = $(".wb-steps li");&nbsp; &nbsp; var show = $steps.length === $steps.filter('.complete').length;&nbsp; &nbsp; $("#steps-complete")&nbsp; &nbsp; &nbsp; &nbsp; .toggle(show)&nbsp; &nbsp; &nbsp; &nbsp; .get(0)&nbsp; &nbsp; &nbsp; &nbsp; .toggleAttribute('hidden', show);});