Question

我有一小组项目，如下所示。

    <div class="item">
        <div class="date">2013-08-08</div>
        <div class="headline"><a data="normal" href="#">Title</a></div>
    </div>

    <div class="item">
        <div class="date">2013-10-08</div>
        <div class="headline"><a data="special" href="#">Title</a></div>
    </div>

如果标题的数据属性为特殊，我想仅为该项目设置日期粗体。我有以下代码尝试这样做。

    <script>
        if ($(".headline a [data='special']")){
            $( ".date" ).wrap( "<b></b>" );
        }
    </script>

但是，如果条件为真，则会使所有项目变为粗体。我熟悉在JS中使用 this 但不知道如何将它与上面的另一个div相关联。

最好的方法是什么？如果需要，我很乐意改变html结构。

Answer 1

尝试以下方法：

$(".headline a[data='special']").parent().siblings(".date").wrap("<b></b>");

parent()功能会为匹配的div.headline标记选择<a>;然后，siblings(".date")将选择具有 date 类的div.headline（称为兄弟姐妹）的父级的子级。

Answer 2

听起来您想要选择包含.date元素的.item元素中的.headline a[data="special"]元素。

$('.item:has(.headline a[data="special"]) .date')

会为我的假设选择正确的.date元素，然后您可以调用.wrap('<b></b>')。

另请注意：[data]不是有效[data-*] attribute。您必须有自定义数据属性的连字符和名称。

JS仅适用于相关项目的条件

2 个答案: