如果跨文本等于某些东西，我如何才能将类添加到最近的li？

Question

我一直在研究一些jQuery代码，如果span文本存在，它将向li添加一个类。这样它将为每个li添加一个不同的类。如果span文本存在，我如何将每个类添加到li？

这是我到目前为止。

$(document).ready(function() { 
 

 
    // Adds SPAN tags 
 
    $('.menu > ul > li > a').each(function() { 
 
    $(this.firstChild).wrap('<span></span>'); 
 
    }); 
 

 
    if ($('.menu > ul > li:first-child > a > span').text() == "Dashboard") { 
 

 
    $('span:contains("dashboard")').closest("li").addClass('dashboard'); 
 
    } else { 
 
    $('.menu > ul > li').addClass('Returns False'); // Added this for testing only 
 
    } 
 
    
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
The HTML currently looks like this 
 

 
<div class="menu"> 
 
    <ul> 
 
    <li><a class="user_menu_link_selected" href="#">Dashboard</a> 
 
    </li> 
 
    <li><a class="user_menu_link" href="#">Monitor</a> 
 
     <li> 
 
     <li><a class="user_menu_link" href="#">Admin</a> 
 
     </li> 
 
     <li><a class="user_menu_link" href="#">FTP</a> 
 
     </li> 
 
    </ul> 
 
</div>

这是我希望它看起来

<div class="menu"> 
    <ul> 
     <li class="dashboard"><a class="user_menu_link_selected" href="#"><span>Dashboard</span></a></li> 
     <li class="monitor"><a class="user_menu_link" href="#"><span>Monitor</span></a><li> 
     <li class="admin"><a class="user_menu_link" href="#"><span>Admin</span></a></li> 
     <li class="ftp"><a class="user_menu_link" href="#"><span>FTP</span></a></li> 
    </ul> 
</div> 

Answer 1

如果你改变了最初的标记这是更好。

但如果你不能那么它看起来像类名是一样的跨度，以便

$(document).ready(function() { 
 
    // Adds SPAN tags 
 
    $('.menu > ul > li > a').wrapInner('<span></span>'); 
 

 
    $('.menu > ul > li').addClass(function() { 
 
    return $(this).find('> a > span').text().trim().toLowerCase() 
 
    }) 
 
});

.menu li { 
 
    margin-bottom: 5px; 
 
} 
 
.menu span { 
 
    border: 1px solid red; 
 
} 
 
.dashboard { 
 
    background-color: lightgrey; 
 
} 
 
.monitor { 
 
    background-color: lightblue; 
 
} 
 
.admin { 
 
    background-color: lightyellow; 
 
} 
 
.ftp { 
 
    background-color: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
     <li><a class="user_menu_link_selected" href="#">Dashboard</a></li> 
 
     <li><a class="user_menu_link" href="#">Monitor</a></li> 
 
     <li><a class="user_menu_link" href="#">Admin</a></li> 
 
     <li><a class="user_menu_link" href="#">FTP</a></li> 
 
    </ul> 
 
</div>

---

的文本。如果关系不是那么简单然后使用键值对

$(document).ready(function() { 
 
    // Adds SPAN tags 
 
    $('.menu > ul > li > a').wrapInner('<span></span>'); 
 

 
    var map = { 
 
    Dashboard: 'dashboard', 
 
    Monitor: 'monitor', 
 
    Admin: 'admin', 
 
    FTP: 'ftp' 
 
    } 
 
    $('.menu > ul > li').addClass(function() { 
 
    return map[$(this).find('> a > span').text().trim()] 
 
    }) 
 
});

.menu li { 
 
    margin-bottom: 5px; 
 
} 
 
.menu span { 
 
    border: 1px solid red; 
 
} 
 
.dashboard { 
 
    background-color: lightgrey; 
 
} 
 
.monitor { 
 
    background-color: lightblue; 
 
} 
 
.admin { 
 
    background-color: lightyellow; 
 
} 
 
.ftp { 
 
    background-color: lightgreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    <ul> 
 
     <li><a class="user_menu_link_selected" href="#">Dashboard</a></li> 
 
     <li><a class="user_menu_link" href="#">Monitor</a></li> 
 
     <li><a class="user_menu_link" href="#">Admin</a></li> 
 
     <li><a class="user_menu_link" href="#">FTP</a></li> 
 
    </ul> 
 
</div>