Wie bekomme ich ausgewählte Elemente von einer UL?

Question

Ich habe ein Formular erstellt und ein Teil dieses Formulars ist eine Liste mit fünf Elementen. Diese Elemente können mit der Maus verschoben werden. Die hovered Elemente haben die Klasse selected. Die Frage ist, wie kann ich den Wert dieser Elemente nehmen, um sie an den Server zu senden?

<ul id="service" class="icon-group booking-item-rating-stars"> 
    <li id="1"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="2"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="3"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="4"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
    <li id="5"> 
     <i class="fa fa-smile-o"></i> 
    </li> 
</ul> 

Answer 1

Wenn ich verstehe, korrigieren Sie dies, was Sie brauchen:

$('#service li').on('hover', function() { 
    sendToServer($(this).text()); 
}); 

Und wenn Sie ausgewählte Klasse müssen überprüfen:

$('#service li').on('hover', function() { 
    var $this = $(this); 
    if ($this.hasClass('selected')) { 
     sendToServer($this.text()); 
    } 
}); 

Answer 2

diese Demo, wenn Ihr <li> aussieht dieses:

<li> 
    <input type="hidden" id="3" value="3"> 
    <i class="fa fa-smile-o">c</i></li> 
<li> 

Demo:

$(function() { 
 
    $('#service li').hover(function() { 
 
     $(this).addClass('selected'); // add selected class on hover 
 
     var data = $(this).find(':hidden').val(); // get input hidden value inside the li 
 
     sendToServer(data); // call send to server function passing data variable 
 
    }, function() { 
 
     $(this).removeClass('selected'); 
 
    }); 
 
}); 
 

 

 

 

 
function sendToServer(data) { 
 
    console.log(data); 
 
    // insert send to server program here 
 
}

.selected { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="service" class="icon-group booking-item-rating-stars"> 
 
    <li> 
 
     <input type="hidden" id="1" value="1"> 
 
     <i class="fa fa-smile-o">a</i></li> 
 
    <li> 
 
     <input type="hidden" id="2" value="2"> 
 
     <i class="fa fa-smile-o">b</i></li> 
 
    <li> 
 
     <input type="hidden" id="3" value="3"> 
 
     <i class="fa fa-smile-o">c</i></li> 
 
    <li> 
 
     <input type="hidden" id="4" value="4"> 
 
     <i class="fa fa-smile-o">d</i></li> 
 
    <li> 
 
     <input type="hidden" id="5" value="5"> 
 
     <i class="fa fa-smile-o">e</i></li> 
 

 
</ul>