Как добавить boxShadow в класс Span, если класс Span Text = 1?

Question

Не уверен, что это подходящее место или нет, но я пытаюсь переделать/тему/стиль веб-сайта для Chrome, используя стильный или, возможно, Tampermonkey, если это невозможно с помощью html/css.

Это то, что HTML часть выглядит, что я пытаюсь изменить:

<div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class="user-row"><span class="ynicon ynicon-level"></span><span class="level">3</span> <span class="name">name</span></div><div class="viewer-row"><span class="ynicon ynicon-viewers"></span> <span class="viewers">344</span></div>" 

Более точно <span class="level">3</span> В основном то, что я пытаюсь сделать, это:

если пролет класс =» level "= 1, затем boxShadow.

Уже пробовал следующий код с Tampermonkey, но это не работает:

var span = document.getElementsByClassName("level")[1]; 
span.style.boxShadow="2px 2px 5px red"; 

и

var level = $(".queue-item.thumb.clickable.ng-scope span:contains('1')"); 
level.style.boxShadow="2px 2px 5px red"; 

Надежда кто-то может помочь мне.

Спасибо!

Редактировать: Пробовал оба ответа JQuery, но он не работает. Это прямо копировать/вставить из chromes инспектировать элемент консоль с полным блоком сНа или то, что когда-нибудь его называют:

<div id="tag-queue" ng-if="broadcasterService.queue.length &amp;&amp; !swf.settingUpBroadcast" class="ng-scope"> 
<div class="title ng-binding"> 
    148 
    Broadcasters 
    on 
    <span class="clickable ng-binding" ng-click="goIfNotBroadcasting(goto, 'explore/tag/'+broadcasterService.broadcaster.tags[0])"> 
       #girls 
    </span> 
</div> 
<!-- ngRepeat: person in broadcasterService.queue --><div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class=&quot;user-row&quot;><span class=&quot;ynicon ynicon-level&quot;></span><span class=&quot;level&quot;>69</span> <span class=&quot;name&quot;>MaddieWelborn</span></div><div class=&quot;viewer-row&quot;><span class=&quot;ynicon ynicon-viewers&quot;></span> <span class=&quot;viewers&quot;>635</span></div>" style="background-image: url(http://cdn2.younow.com/php/api/channel/getImage/channelId=2329157), url(http://cdn2.younow.com/images/nothumb.jpg);"> 
      <!-- ngIf: ::(broadcasterService.broadcaster.userId==person.userId||broadcasterService.broadcaster.userId==session.user.userId) --> 
</div><!-- end ngRepeat: person in broadcasterService.queue --><div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class=&quot;user-row&quot;><span class=&quot;ynicon ynicon-level&quot;></span><span class=&quot;level&quot;>30</span> <span class=&quot;name&quot;>RoosaMyllyla</span></div><div class=&quot;viewer-row&quot;><span class=&quot;ynicon ynicon-viewers&quot;></span> <span class=&quot;viewers&quot;>491</span></div>" style="background-image: url(http://cdn2.younow.com/php/api/channel/getImage/channelId=7068282), url(http://cdn2.younow.com/images/nothumb.jpg);"> 
      <!-- ngIf: ::(broadcasterService.broadcaster.userId==person.userId||broadcasterService.broadcaster.userId==session.user.userId) --> 
</div><!-- end ngRepeat: person in broadcasterService.queue --><div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class=&quot;user-row&quot;><span class=&quot;ynicon ynicon-level&quot;></span><span class=&quot;level&quot;>29</span> <span class=&quot;name&quot;>katieberryy_</span></div><div class=&quot;viewer-row&quot;><span class=&quot;ynicon ynicon-viewers&quot;></span> <span class=&quot;viewers&quot;>127</span></div>" style="background-image: url(http://cdn2.younow.com/php/api/channel/getImage/channelId=4851886), url(http://cdn2.younow.com/images/nothumb.jpg);"> 
      <!-- ngIf: ::(broadcasterService.broadcaster.userId==person.userId||broadcasterService.broadcaster.userId==session.user.userId) --> 
</div><!-- end ngRepeat: person in broadcasterService.queue --><div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class=&quot;user-row&quot;><span class=&quot;ynicon ynicon-level&quot;></span><span class=&quot;level&quot;>7</span> <span class=&quot;name&quot;>itsyourbaerose</span></div><div class=&quot;viewer-row&quot;><span class=&quot;ynicon ynicon-viewers&quot;></span> <span class=&quot;viewers&quot;>141</span></div>" style="background-image: url(http://cdn2.younow.com/php/api/channel/getImage/channelId=9443809), url(http://cdn2.younow.com/images/nothumb.jpg);"> 
      <!-- ngIf: ::(broadcasterService.broadcaster.userId==person.userId||broadcasterService.broadcaster.userId==session.user.userId) --> 
</div><!-- end ngRepeat: person in broadcasterService.queue --><div class="queue-item thumb clickable ng-scope" ng-repeat="person in broadcasterService.queue" ng-click="goIfNotBroadcasting(loadChannel, person.userId)" once-style="{'background-image': 'url('+cdn.thumb+person.userId+'), url('+cdn.nothumb+')'}" tooltip-trigger="mouseenter" tooltip-html-unsafe="<div class=&quot;user-row&quot;><span class=&quot;ynicon ynicon-level&quot;></span><span class=&quot;level&quot;>5</span> <span class=&quot;name&quot;>Larissaxo</span></div><div class=&quot;viewer-row&quot;><span class=&quot;ynicon ynicon-viewers&quot;></span> <span class=&quot;viewers&quot;>144</span></div>" style="background-image: url(http://cdn2.younow.com/php/api/channel/getImage/channelId=2403645), url(http://cdn2.younow.com/images/nothumb.jpg);"> 
      <!-- ngIf: ::(broadcasterService.broadcaster.userId==person.userId||broadcasterService.broadcaster.userId==session.user.userId) --> 

Answer 1

Вы можете использовать JQuery (если вы в состоянии), делая что-то вроде этого:

if ($('.level').html() == '1'){ 
    $('.queue-item').css({"box-shadow": "2px 2px 5px red"}); 
} 

Here is an Example

Answer 2

Вы можете использовать jQuery's filter(), чтобы выбрать все .level элементы, которые имеют html() ваш ищет:

$(function(){ 
 
    
 
    $(".level").filter(function(index) { 
 
    return $(this).html() === '1'; 
 
    }).css("boxShadow", "2px 2px 5px red"); 
 
    
 
});

.level{ 
 
    width:30px; 
 
    height:30px; 
 
    display:inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="level">0</span> 
 
<span class="level">1</span> 
 
<span class="level">2</span> 
 
<span class="level">3</span> 
 
<span class="level">4</span> 
 
<span class="level">5</span>