Question

我在网页上有3个表单部分。每个表单部分都有一个单独的id，其中包含输入元素。我在这些表单元素之外有一个div，作为每个部分的标题。我编写了一个脚本，用于检查表单部分是否有一个输入元素，该输入元素由类名＆＃39; .form-input＆＃39;标记。问题是当没有找到表单输入时我的脚本会使用＆＃34; .title-section＆＃34;隐藏所有标题。班级名称。我只需要隐藏＆＃34; title-section＆＃34;属于表单元素。如果这个标题包含在表格中会更容易，但它作为一个单独的div在外面。

$(function () {
    //If there is no form inputs hide title section
    // .lenght is truthy = true or false
    if (!$(".form-input").length) {
        $(".title-section").hide();
    }
});

请参阅下面的html了解结构

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="title-section">
                <h3>Hide Me 1</h3>
            </div>
            <div id="form-section">
                <div class="well">
                    <input class="form-input">
                </div>
            </div>  
        </div>
    </div>
</div>

Answer 1

它隐藏了所有.title-section元素，因为$('.title-section')选择了与该选择器匹配的所有元素，无论其后面是否有.form-input元素。因此，您需要一些代码来评估.form-input元素后面是否有.title-section元素。像这样的东西会起作用：

var titlesToHide = $('.title-section').filter(function(){
    return $(this).next().find('.form-input').length === 0;
});

titlesToHide.hide();

我正在使用jQuery的.filter()方法来选择所需的元素。在我编写的代码中，它查看每个.title-section元素，然后检查它后面的元素 - .next() - 是否在其中有一个带有类名.form-input的元素。如果没有 - .length === 0 - 过滤器函数返回true，因此在最终集合中包含.title-section元素。

JS小提琴：http://jsfiddle.net/hca1y15z/

在jQuery中隐藏标题元素

1 个答案: