如何在 jquery 中獲取 UL / LI 值

Question

我需要一個城市數組，它如何在 jquery 中工作？ 我從不接觸前端，所以我是個新手。

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-180" tabindex="0" style="display: block; top: 166px; left: 1037.86px; width: 203px;">
<li class="ui-menu-item" id="ui-id-418" tabindex="-1">City1</li>
<li class="ui-menu-item" id="ui-id-419" tabindex="-1">City2</li>
<li class="ui-menu-item" id="ui-id-420" tabindex="-1">City3</li>
<li class="ui-menu-item" id="ui-id-421" tabindex="-1">City4</li></ul>

此城市列表也與輸入字段相關聯。 在服務器端生成的值。 主要 UL 的 ID 為“ui-id-180”，它是否可能在用戶端發生變化？ 輸入字段是否與下拉列表連接？ 如果是這樣，是否有可能知道哪個“ul li”與哪個字段相關？ 我在輸入字段中獲取值的代碼：

$("[name=" + City.GetInputName() + "]").keyup(function(eventObject){
$("[name=" + Source.GetInputName() + "]").val(function(index, value){});});

更新 1有一個使用@mplungjan 答案的示例。 如果有多個 UL，則數組具有不需要的值。 這就是為什么我詢問輸入字段和 UL（過濾值）的連接。

Answer 1

以下是如何在不接觸 ID 的情況下獲取 jQuery 地圖中的城市

 const cities = $(".ui-autocomplete li") .map(function() { return this.textContent.trim()}) .get(); console.log(cities)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-180" tabindex="0" style="display: block; top: 166px; left: 1037.86px; width: 203px;"> <li class="ui-menu-item" id="ui-id-418" tabindex="-1">City1</li> <li class="ui-menu-item" id="ui-id-419" tabindex="-1">City2</li> <li class="ui-menu-item" id="ui-id-420" tabindex="-1">City3</li> <li class="ui-menu-item" id="ui-id-421" tabindex="-1">City4</li> </ul>

Answer 2

如果我正確理解了這個問題，你想創建一個包含li標簽值的數組，像這樣

["City1", "City2", "City3", "City4"]

一種通過使用這樣的map方法來做到這一點的方法

//use HTML DOM to target the <li> elements
let li = document.getElementsByClassName("ui-menu-item");
//display the values into the array
let array = [...li].map(e => e.innerHTML);

console.log(array); 
//output : ["City1", "City2", "City3", "City4"]

Answer 3

代碼應該是：

var cities = [];
  $('#cities').click(function(){ \\ Click event
    $.each($('li'), function(index,el){ \\Loop on cities
        cities.push($(el).text()); \\Pushing city name to an array
    });
    alert(cities);
    console.log(cities);
  })

 var cities = []; $('#cities').click(function(){ $.each($('li'), function(index,el){ cities.push($(el).text()); }); alert(cities); console.log(cities); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-180" tabindex="0" style="display: block; top: 166px; left: 1037.86px; width: 203px;"> <li class="ui-menu-item" id="ui-id-418" tabindex="-1">City1</li> <li class="ui-menu-item" id="ui-id-419" tabindex="-1">City2</li> <li class="ui-menu-item" id="ui-id-420" tabindex="-1">City3</li> <li class="ui-menu-item" id="ui-id-421" tabindex="-1">City4</li></ul> <button id="cities">GET CITIES</button>

希望這將是有用的。