javascript - 基于内联 CSS 样式或跨文本的 Jquery 选择器

Question

我正在尝试选择适合特定条件的跨度。第一个标准是内联 CSS，它是 style="width:0% !important;" 其次是跨度文本，即

<span class="bv-rating-label">   (0)  </span>

完整的 HTML 代码如下:

<div class="bv-inline-rating-container">
<dl class="bv-stars-container" role="presentation">
    <dd class="bv-rating-ratio" role="presentation">
        <span class="bv-rating-stars-container">
            <span class="bv-rating-stars bv-rating-stars-off" aria-hidden="true">  ★★★★★  </span>
            <span class="bv-rating-stars-on bv-rating-stars" style="width:0% !important;" aria-hidden="true">  ★★★★★  </span>
        </span>
    </dd>
    <dd class="bv-rating-ratio-count" role="presentation">
        <span class="bv-rating-label">   (0)  </span>
    </dd>
</dl>

以下是我尝试过的一些选项。 选项 1:

jQuery(".bv-rating-label:contains('   (0)  ')").hide();   

选项 2:

jQuery('.bv-rating-stars-on.bv-rating-stars[style*="width:0% !important"]).hide();

以上选项均无效:/

Answer 1

我把你的问题写进了JSFiddle .

我能够根据元素各自的属性和它们所持有的文本值来隐藏元素。

如果你不想去 JSFiddle，这里是我有的:

HTML:

<div class="bv-inline-rating-container">
<dl class="bv-stars-container" role="presentation">
    <dd class="bv-rating-ratio" role="presentation">
        <span class="bv-rating-stars-container">
            <span class="bv-rating-stars bv-rating-stars-off" aria-hidden="true">  ★★★★★  </span>
            <span class="bv-rating-stars-on bv-rating-stars" style="width:0% !important;" aria-hidden="true">  ★★★★★test  </span>
        </span>
    </dd>
    <dd class="bv-rating-ratio-count" role="presentation">
        <span class="bv-rating-label">   (0)  </span>
    </dd>
</dl>

jQuery:

$(document).ready(function () {
    $(".bv-rating-label:contains('(0)')").hide();
});

$(document).ready(function () {
    $(".bv-rating-stars-on, .bv-rating-stars[style='width:0% !important']").hide();
});

希望对您有所帮助。