仅当条件适用于相关项目时，JS 才适用

JS Only apply if condition to relevant item

本文关键字：JS 项目 条件 适用于      更新时间：2023-09-26

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

    <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 中使用它，但不确定如何将其与上面的另一个div 联系起来。

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

尝试以下操作：

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

parent() 函数将为匹配的 <a> 标记选择div.headline;然后，siblings(".date")将选择具有日期类的div.headline父级（称为同级）的子级（称为同级）。

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

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

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

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

相关文章：