Question

我正在使用查询字符串来过滤列表的结果。列表项具有多个类，分配给它们作为“主题”（这是查询字符串中的键之一）。我将多个查询主题拉入数组“queryTopics”，然后将其分解为具有“join（）”的单个类，并将其添加到jquery选择器作为变量“chosenCategory”，然后使用“each（）”，我迭代通过列表项。我希望能够从列表项中提取与查询“topics”匹配的类名，并将它们分配给变量“chosenTaxonomy”。

以下是我的代码的一部分，它检查列表项以及列表项的示例：

function filterQuery(queryYear, queryTopics) {
    $("ul.mediaListing .errorMsg").remove();
    var chosenYear = queryYear.toString();
    var countShows = 0;
    var chosenCategory = queryTopics.join(", .");

    if (chosenCategory == "all") {
        chosenCategory = "mediaListingEntry";
    }
    if (chosenCategory == "mediaListingEntry" && chosenYear == "all") {
        $("ul.mediaListing").children("li").each(function(c) {
            countShows = countShows + 1;
            $(this).removeClass("filteredOut");
        });
    } else if (chosenYear == "all") {
        chosenYear = "mediaListingEntry";
        $("ul.mediaListing").children("li." + chosenYear + "." + chosenCategory).each(function(c) {
            var chosenTaxonomy = chosenCategory.replace(/[-.]+/g, ' ');
            $(this).find('.news-block-taxonomy').html(chosenTaxonomy);
            countShows = countShows + 1;
            $(this).removeClass("filteredOut");
        });
        $("ul.mediaListing").children("li:not(." + chosenYear + "." + chosenCategory + ")").each(function(c) {
            $(this).addClass("filteredOut");
        });
        var textYear = queryYear;
        $("ul.mediaListing").prepend("<h3 class='seachMsg'>Search results for " + chosenCategory.replace(/[.-]+/g, " ") + " in " + textYear + " years" + "</h3>");
    } else {
        $("ul.mediaListing").children("li." + chosenYear + "." + chosenCategory).each(function(c) {
            if (chosenCategory != "mediaListingEntry") {
                var chosenTaxonomy = chosenCategory.replace(/[-.]+/g, ' ');
                $(this).find('.news-block-taxonomy').html(chosenTaxonomy);
            }
            countShows = countShows + 1;
            $(this).removeClass("filteredOut");
        });
        $("ul.mediaListing").children("li:not(." + chosenYear + "." + chosenCategory + ")").each(function(c) {
            $(this).addClass("filteredOut");
        });
        var textYear = queryYear;
        $("ul.mediaListing").prepend("<h3 class='seachMsg'>Search results for " + chosenCategory.replace(/[.-]+/g, " ") + " in " + textYear + " years" + "</h3>");
    }
    if (countShows == 0) {

        var yearText = chosenYear;

        var categoryText = chosenCategory;
        if (chosenCategory == "all" || chosenCategory == "mediaListingEntry") {
            categoryText = "All Categories";
        }
        if (chosenYear == "all") {
            yearText = "All Years";
        }
        $("ul.mediaListing").append("<h3 class='errorMsg'>No matches for " + categoryText.replace(/[.-]+/g, " ") + " in " + yearText + " years" + "</h3>");
    }

    paginate();
}

<ul class="news-list news-articles mediaListing">
    <h3 class="seachMsg">Search results for alumni,  academics in all news</h3>
    <li class="news-list-item mediaListingEntry 2016-17   faculty-&amp;-staff athletics filteredOut">
        <article class="news-block is-blue">
            <div class="news-block-holder">
            <strong class="news-block-taxonomy athletics">Athletics</strong>
            <div class="news-block-img" style="background-image: url(&quot;../assets/images/img-news-list-01.jpg&quot;); background-size: cover;">
                <img alt="News Image" src="../assets/images/img-news-list-01.jpg" style="display: none;">
            </div>
            <div class="news-block-body">
                <a class="news-block-link" href="2016-17/News.html">Turkey Sandwich</a>
            </div>
          </div>
        </article>
    </li>
</ul>

Answer 1

将年份和类别与此结合使用时：

.children("li." + chosenYear + "." + chosenCategory)"li." + chosenYear + "." + chosenCategory)

你最终得到了一个选择器：

li.year.category1, .category2, .category3

请注意，年级只与第一个类别合并，而不是与所有类别合并。

相反，您可以这样做：

.children("li."+chosenYear).filter("."+chosenCategory)

将多个类与Jquery选择器

1 个答案: