JQuery - 如何将class（）添加到与属性值匹配的元素答案

【问题标题】：JQuery - how to addclass() to an element where it matches an attribute valueJQuery - 如何将class（）添加到与属性值匹配的元素
【发布时间】：2014-01-21 16:51:32
【问题描述】：

我有一组用于排序的链接，例如。类别、名称、日期，并有另一组升序/降序。最初，当页面加载时，这些都不会被选择，结果也不会按任何顺序排列。进行选择时，我需要为两个组设置值，即。 sortby 和 sortorder。

例如，如果用户选择按“类别”排序，则以下函数将使用 ASC 作为默认排序方向。然后，我还需要能够通过将“selected”类添加到链接来突出显示带有 data-option-value="asc" 的链接。

有人可以帮忙吗？

        $('.sort a').click(function(e) {
            var $this = $(this);

            // Turn 'selected' class on/off
            if ($this.hasClass('selected'))
                return false;
            $this.parents('.sort-set').find('.selected').removeClass('selected');
            $this.addClass('selected');

            if($('.sortKey a.selected').attr('data-option-value')){
                key = $('.sortKey a.selected').attr('data-option-value');
            } else {
                 var key = 'date';
                 //.addClass('selected');  HOW TO DO THIS??
            }

            if($('.sortOrder a.selected').attr('data-option-value')){
                order = $('.sortOrder a.selected').attr('data-option-value');
            } else {
              var order = "asc";  
              //.addClass('selected');  HOW TO DO THIS??
            }

            $container.isotope({sortBy: valBy, sortAscending: valAscending});

            return false;
          });

                    <div class="option-combo sort">
                        <ul class="sort sort-set clearfix sortKey">
                            <li><a href="#" data-option-value="name">Name</a></li>
                            <li><a href="#" data-option-value="category">Category</a></li>
                            <li><a href="#" data-option-value="date">Expiry Date</a></li>
                        </ul>
                    </div>
                    <div class="option-combo sort">
                        <ul class="sort sort-set clearfix sortOrder">
                            <li><a href="#" data-option-value="asc">Ascending</a></li>
                            <li><a href="#" data-option-value="desc">Descending</a></li>
                        </ul>
                    </div>

【问题讨论】：

标签： javascript jquery sorting

【解决方案1】：

可以在选择器中使用属性值：

$("element[attribute='value']").addClass('selected')

根据您的 cmets，您可能需要执行以下操作：

$("a[data-option-value='asc']", ".sortOrder").addClass('selected')

【讨论】：

您的查询是多余的...您正在获取“选定”类的链接并添加“选定”类？这似乎没有任何影响，因为返回的元素已经具有该类。 $(".sortKey a[data-option-value='date']").addClass('selected')
我想要做的是检查哪个链接有“选择”类。然后根据链接所在的组，我需要将“选定”类添加到另一个链接。不是同一个链接。希望这是有道理的。
我对 Jquery 语法不是很好，我把它想象成这样： $(".sortOrder:has[data-option-value='asc']").addClass('selected');
确实如此。不过，您的查询只会向链接返回添加一个类。您可能需要在多行中执行此操作并构建一个选择器。我将用一些细节更新解决方案，以便格式化代码。