如何在前面的同级中添加一个类?

时间:2018-10-08 18:25:19

标签: jquery

我具有以下HTML结构(摘要):

    <div id="mySearch" class="search_input">
        <form id="searchForm" method="get" action="../search.html">
            <div>
                <input type="search" placeholder="Search " class="search_textfield"
                    id="textToSearch" name="searchQuery" />
                <button type="submit" class="search_button">
                    <span>Search</span>
                </button>
            </div>
        </form>
    </div>
    <div class="container-fluid">
        <div class="row">
            <nav class="tools hidden-print">
                <div data-tooltip-position="bottom" class=" breadcrumb ">
                    <ol xmlns:html="http://www.w3.org/1999/xhtml" class="hidden-print">
                        <li>
                            <span class="home">
                                <a href="../index.html">Home</a>
                            </span>
                        </li>
                        <li>
                            <span class="title">
                                <a href="install-system.html">Installation</a>
                            </span>
                        </li>
                        <li>
                            <span class="topicref">
                                <span class="title">
                                    <a href="setup.html"> Setup system </a>
                                </span>
                            </span>
                        </li>
                    </ol>
                </div>
            </nav>
        </div>
    </div>

我想根据下面的div.breadcrumb文本向#mySearch添加一个类。例如,如果第二个面包屑(“安装”)的值(“主页”>“安装”> ...),然后将类“安装”添加到搜索div #mySearch。

这是我整理的内容,但是没有用。我不确定如何选择第二个面包屑,因此只搜索了文本“安装”。

<script type="text/javascript">$(document).ready(function(){
if ($('.breadcrumb:contains("Installation")').length > 0) {
    $("#mySearch").addClass("install");
}
});
</script>

1 个答案:

答案 0 :(得分:-1)

有人发布了我说无效的解决方案。然后该人删除了该帖子。但是,在解决了一段时间后,我得以使它起作用!所以,谢谢你!

$(document).ready(function () { // path: //div/ol/li/span/a var current_class=$.trim($('.breadcrumb > ol > li:eq(1) > span > a').text()).toLowerCase(); current_class = current_class.replace(/\s+/g, '_'); // convert spaces to _ console.log(current_class); $('#mySearch').addClass(current_class) });

我是JS的新手,因此其他人也许可以提出更优雅的解决方案,但这对我有用。