Question

我正在创建一个导航栏，并且只有当元素的类为"active"并且元素的值等于字符串时，才希望在每个元素旁边包含一个图标。

http://gyazo.com/4811bc6779aaecd1fe80c020a69f1fb6.png

所以，我已经在元素旁边显示了图标，我不希望它们在Home之类的活动类之前可见。我试过这个：

if($('.navbar-nav li').hasClass('active') && $('.navbar-nav li a').val() === "Home"){
    $('.navbar-nav li.active a').prepend('test ');
}

但它不起作用。我对每个元素都有不同的图标，所以我猜测每个案例elseif。

导航标记（用PHP显示）：

    <?php
      $nav = array(
     'Home' => 'index.php',
     '<span class="icon-bubbles"></span> Forums' => '#',
     '<span class="icon-cabinet"></span> Gametypes' => 'index.php?action=gamemodes',
     '<span class="icon-aid"></span> Help' => 'index.php?action=help',
     'Statistics' => 'index.php?action=statistics'
     );
    ?>
<ul class="nav navbar-nav">
    <?php
        $request = basename($_SERVER['REQUEST_URI']);
        foreach($nav as $name => $link):
    ?>
    <li <?php if($request == $link) echo 'class="active"'; ?>><a href="<?php echo $link; ?>"><?php echo $name ?></a></li>
    <?php
        endforeach;
    ?>
  <li>
    <a href="http://google.com" title="Thanks for voting!" rel="shadowbox[vote];width=1000px;"><span class="icon-pencil"></span> Minecraft Voting</a>
    <div style="display:none;">
        <a href="http://google.com" title="Thanks for voting!" rel="shadowbox[vote];width=1000px;"></a>
    </div>
  </li>
</ul>

Answer 1

.val()无效。它适用于输入类型。使用.text()

尝试：

if($('.navbar-nav li').hasClass('active') && $('.navbar-nav li a').text() === "Home"){
    $('.navbar-nav li.active a').prepend('test ');
}

Answer 2

试试这个：

if($('.navbar-nav li').attr(class).indexOf('active')!=-1 && $('.navbar-nav li a').val() === "Home"){
    $('.navbar-nav li.active a').prepend('test ');
}

Answer 3

$('.navbar-nav li.active a:contains(Home)').prepend('test ');

如果选择器与任何元素都不匹配，则不会发生任何事情。

如果元素具有类和特定值，则jquery显示内容

3 个答案: