Question

在我的网页中，我有许多常规元素都共享相同的结构。这些元素包含一个跨度，可以用一些文本填充，也可以留空。

这些元素首先使用JQuery的hide()函数进行隐藏。

我希望能够依次获取每个元素，检查其子范围是否包含任何文本，如果包含，那么我希望使用show()显示该元素。

以下是我要隐藏/显示的元素的示例：

<div id="application-number-row" class="row validation-row">
    <div class="col">
        <span>Application Number</span>
    </div>
    <div class="col">
        <span id="application-number-value" class="validation-row-value">value</span>
    </div>
</div>

<div id="property-value" class="row validation-row">
    <div class="col">
        <span>Property Value</span>
    </div>
    <div class="col">
        <span id="property-value-value" class="validation-row-value"></span>
    </div>
</div>

目前，我有以下代码。第一个函数可以正常工作，并使用.validation-row类隐藏所有元素。但是，第二个功能不起作用，我不确定如何构造代码，以便依次遍历每个.validation-row。

function hideAllDataRows() {
    $('.validation-row').hide();
}

function displayPopualtedDataRows() {

    var validationRow = $('.validation-row');

    if (validationRow.find('.validation-row-value').html != "") {
        validationRow.show();
    }
}

这是我想发生的事情的分解：

获取在HTML文档中找到的每个.validation行
遍历每个.validation-row，并检查子.validation-row-value <span>是否包含任何文本。
如果需要，请在整个$(show())上致电.validation-row

Answer 1

获取在HTML文档中找到的每个.validation-row

var rows = $(".validation-row");

遍历每个.validation-row，然后检查子.validation-row-value是否包含任何文本。

不需要先“获取”它们，但是如果有帮助的话：

var rows = $(".validation-row");
rows.each(function() { 
    if ($(this).find("span.validation-row-value").text() !== "") {
    }
});

如果需要，请在整个$(show())上致电.validation-row

var rows = $(".validation-row");
rows.each(function() { 
    if ($(this).find("span.validation-row-value").text() !== "")
        $(this).show();
});

可以使用.map或:contains来简化此操作

如何迭代多个相似的元素并依次更改每个元素的属性？

1 个答案: