如何将 li 项附加到给定 id 的第一个 ul
How to append li items to fisrt ul of given id
我正在尝试访问给定 div
<div class="form-group" id="contract">
的 2(更多)div
内的第一个 <ul>
,即 $('#contract')
代码:
<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>
<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>
如何使用第一个 div 的 ID 和 jQuery.
将 <li>
项附加到(第一个且仅)<ul>
目标 div 不是 parent,而是 parent 的 parent 的 parent。
您可以使用 .find()
在其所有子元素中查找元素,然后使用方法 .append()
将一些 html 附加到先前返回的 jquery 对象步骤.
$("#contract").find(".dropdown-menu").append('<li>li Content</li>')
如果要将新项目添加为列表中的第一个项目,请使用 prepend 方法。否则,使用 append.
$('#contract').find('ul').prepend('<li>added node</li>')
如果可能,您可以将 css class 或 id 添加到 ul 元素,并将其用作 jquery 中的选择器。如果不可能,您可以使您的选择器更精确以避免选择错误的节点,例如 $('#contract .dropdown-menu > ul').prepend('<li>added node</li>')
我正在尝试访问给定 div
<div class="form-group" id="contract">
的 2(更多)div
内的第一个 <ul>
,即 $('#contract')
代码:
<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>
<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>
如何使用第一个 div 的 ID 和 jQuery.
将 <li>
项附加到(第一个且仅)<ul>
目标 div 不是 parent,而是 parent 的 parent 的 parent。
您可以使用 .find()
在其所有子元素中查找元素,然后使用方法 .append()
将一些 html 附加到先前返回的 jquery 对象步骤.
$("#contract").find(".dropdown-menu").append('<li>li Content</li>')
如果要将新项目添加为列表中的第一个项目,请使用 prepend 方法。否则,使用 append.
$('#contract').find('ul').prepend('<li>added node</li>')
如果可能,您可以将 css class 或 id 添加到 ul 元素,并将其用作 jquery 中的选择器。如果不可能,您可以使您的选择器更精确以避免选择错误的节点,例如 $('#contract .dropdown-menu > ul').prepend('<li>added node</li>')