如何将 li 项目附加到给定 id 的第一个 ul答案

【问题标题】：How to append li items to fisrt ul of given id如何将 li 项目附加到给定 id 的第一个 ul
【发布时间】：2018-03-01 06:40:12
【问题描述】：

我正在尝试访问给定div <div class="form-group" id="contract"> 即$('#contract') 的2 个（更多）divs 内的第一个<ul>

代码：

<div class="form-group" id="contract">
    <div class="btn-group bootstrap-select search-fields open">
        <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="ct" title="Contract Types" aria-expanded="true">
            <span class="filter-option pull-left">Contract Types</span>&nbsp;
                <span class="bs-caret">
                    <span class="caret"></span>
                </span>
        </button>
        <div class="dropdown-menu open" role="combobox" style="max-height: 590px; overflow: hidden; min-height: 158px;">
            <div class="bs-searchbox">
                <input type="text" class="form-control" autocomplete="off" placeholder="Search value" role="textbox" aria-label="Search">
            </div>
            <ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 543px; overflow-y: auto; min-height: 111px;">
                <li data-original-index="0" class="selected active">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true">
                        <span class="text">Contract Types</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="1">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Rent</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="2">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Buy</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="3">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Commercial Rent</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="4">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Commercial Buy</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>

                <-- *** I want to append new li items here using $('#contract') of parent's parent's parent (3rd parent's) div *** -->
            </ul>
        </div>
        <select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value" tabindex="-98">
            <option value="">Contract Types</option>
            <option value="1">Rent</option>
            <option value="2">Buy</option>
            <option value="3">Commercial Rent</option>
            <option value="4">Commercial Buy</option> 
            <-- *** here, I can append a new option like *** -->
            <script>
                $('#ct').append('<option value="5">New option</option>');
            </script>                                                                                                   
        </select>
    </div>
</div>

如何使用带有 jQuery 的第一个 div 的 id 将 <li> 项目附加到（第一个和唯一）<ul>。
目标 div 不是父级，而是父级的父级的父级。

【问题讨论】：

标签： jquery html html-lists bootstrap-select bootstrap-selectpicker

【解决方案1】：

您可以使用.find() 在其所有子元素中查找该元素，然后使用方法.append() 将一些html 附加到上一步返回的jquery 对象中。

$("#contract").find(".dropdown-menu").append('<li>li Content</li>')

【讨论】：

你是救生员！非常感谢...只是一个忙...我可以像这样清除/清空 ul 吗？？？
@talesid $("#contract").find(".dropdown-menu").empty() 应该这样做。如果它解决了疑问，请标记答案正确！ :)

【解决方案2】：

如果要将新项目添加为列表中的第一项，请使用 prepend 方法。否则，使用追加。

$('#contract').find('ul').prepend('<li>added node</li>')

JSFiddle

如果可能，您可以向 ul 元素添加一个 css 类或 id，并将其用作 jquery 中的选择器。如果不可能，你可以让你的选择器更精确，以避免选择错误的节点，例如$('#contract .dropdown-menu > ul').prepend('<li>added node</li>')

【讨论】：