如果Span Class Text = 1,如何将boxShadow添加到Span类?

时间:2015-04-05 19:01:31

标签: javascript css angularjs

不确定这是否是正确的地方,但是如果html / css不可能,我会尝试使用Stylish或者Tampermonkey为Chrome网站重新设置皮肤/主题/风格

这就是我试图改变的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> 基本上我要做的是:

如果span class =&#34; level&#34; = 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 inspect元素控制台直接复制/粘贴的完整div块或者它所谓的:

<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) -->

2 个答案:

答案 0 :(得分:0)

您可以通过执行以下操作来使用jQuery(如果能够):

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

<强> Here is an Example

答案 1 :(得分:0)

您可以使用jQuery's filter()选择所有.level您要查找的html()元素:

&#13;
&#13;
$(function(){
  
  $(".level").filter(function( index ) {
    return $(this).html() === '1';
  }).css( "boxShadow", "2px 2px 5px red" );
  
});
&#13;
.level{
    width:30px;
    height:30px;
    display:inline-block;
}
&#13;
<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>
&#13;
&#13;
&#13;