按字符串名称移动下拉列表中li的位置

您好，我正在尝试将特定li字符串名称的位置移动到下拉列表的顶部。

<ul id="guestdetails_country-menu" class="ui-selectmenu-menu ui-widget ui-    widget-content ui-selectmenu-menu-dropdown ui-corner-bottom w230 ui-selectmenu-open" aria-labelledby="guestdetails_country-button" role="listbox" aria-hidden="false" style="z-index: 9999; width: 230px; height: 250px; top: 393px; left: 620px;" aria-disabled="false" aria-activedescendant="ui-selectmenu-item- 8">
    <li class="" role="presentation">
        <a id="" aria-selected="false" role="option" tabindex="-1" href="#"></a>
    </li>
    <li role="presentation">
        <a aria-selected="false" role="option" tabindex="-1"  href="#">Afghanistan</a>
    </li>
    <li role="presentation">
        <a aria-selected="false" role="option" tabindex="-1" href="#">Åland Islands</a>
    </li>
    <li role="presentation">
        <a aria-selected="false" role="option" tabindex="-1" href="#">Albania</a>
    </li>

jquery
我试过这样做，但没有成功

$(function(){ var $select = $('#guestdetails_country-menu li a') $select.find('Albania').insertBefore($select.find('li:eq(1)')); });
也尝试用这种方式选择文本，但也不工作

$(function(){ var $select = $('#guestdetails_country-menu li a').text() $(this).html($(this).html('Albania').insertBefore($select.find('li:eq(1)'))); });
通过选择eq工作，但我想要一个更有效的代码

$(function(){ var $select = $('#guestdetails_country-menu') $select.find('li').eq(237).insertBefore($select.find('li:eq(1)')); });

下面是一个使用JQuery 包含选择器的工作示例，如下所示:

$(function(){ var select_element = $('#guestdetails_country-menu'); select_element.find("li a:contains('Albania')").parent().insertBefore(select_element.find('li:eq(1)')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul id="guestdetails_country-menu" class="ui-selectmenu-menu ui-widget ui- widget-content ui-selectmenu-menu-dropdown ui-corner-bottom w230 ui-selectmenu-open" aria-labelledby="guestdetails_country-button" role="listbox" aria-hidden="false" style="z-index: 9999; width: 230px; height: 250px; top: 393px; left: 620px;" aria-disabled="false" aria-activedescendant="ui-selectmenu-item- 8"> <li class="" role="presentation"> <a id="" aria-selected="false" role="option" tabindex="-1" href="#">First element</a> </li> <li role="presentation"> <a aria-selected="false" role="option" tabindex="-1" href="#">Afghanistan</a> </li> <li role="presentation"> <a aria-selected="false" role="option" tabindex="-1" href="#">Åland Islands</a> </li> <li role="presentation"> <a aria-selected="false" role="option" tabindex="-1" href="#">Albania</a> </li> </ul>

假设你不需要顶部的空LI，我会删除它，然后运行:

var $select = $("#guestdetails_country-menu"); $select.prepend($select.find("li:has(a:contains('Albania'))"))
(prepend的工作原理与insertBefore(el0)相同，只是更简洁一点)

相关内容

最新更新

热门标签：