如何在 jquery 中获取 UL / LI 值

Question

I need an array of Citys, how does it working in jquery? I never touch frontend so I'm very newbie.

<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>

Also this list of citys is connected with input field. Values generated on server side. Main UL has id "ui-id-180" is it possible it may change on user side? Does input field connected with dropdown list? If so is it possible to know which "ul li" connected with which field? My code to get value in input field:

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

Update 1 There is an example using @mplungjan answer. If there is more than one UL the array has unwanted values. That's why I asked about connection of input field and UL ( to filtrate values).

Answer 1

Here is how to get the cities in jQuery map without touching the ID

 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

if i understand the question correctly, you want to create an array containing the values of the li tags like this

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

a way to do this by using the map method like this

//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

Code should be:

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>

Hope this will be useful.