Question

这是我的ul，li：

 <ul class="star-list" id="restaurant-rate">
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "2" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "3" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "4" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>
 </ul>

我正在尝试阅读所选的li数据。我尝试过这样的事情：

 var interest = $('ul#restaurant-rate').find('li.selected').data('interest');
    alert(interest);

将兴趣值定义为未定义。问题是每个li都是一个明星评级，假设如果我选择4th li，这看起来像这样。

    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "2" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "3" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "4" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>

我需要感兴趣的是4.

Answer 1

您可以使用.selected功能查找find()课程。然后使用.data()函数提取数据最后只需添加.dataName

希望这会有所帮助：）

＆＃13;

 var interest = $('ul#restaurant-rate').find('.selected').data().interest;
    alert(interest);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="star-list" id="restaurant-rate">
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "2" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "3" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "4" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>
 </ul>

＆＃13;

因此，基于编辑和评论，我添加了处理selected类

的功能

如果您有任何问题，我将会成为一名

＆＃13;

$('ul#restaurant-rate li').click(function(){
  $('ul#restaurant-rate li').find('span').removeClass('selected');
  $(this).find('span').addClass('selected');
})

function check(){
var interest = $('ul#restaurant-rate').find('.selected').data().interest;
alert(interest);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="star-list" id="restaurant-rate">
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "1" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "2" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "3" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "4" ></span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>
 </ul>
 
 
 <button onclick="check()">Check selection</button>

＆＃13;

Answer 2

所有当前答案都是正确的，但在您更新后，您需要使用loop来获取所有选定的元素。

//var array = [];

$('ul#restaurant-rate .selected').each(function() {
  var interest = $(this).data('interest');
  //array.push(interest);
  console.log(interest);
});

//console.log(array); or return as array

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="restaurant-rate">
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "2" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "3" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "4" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>
</ul>

或者，如果您想获得所有选定元素的长度，您可以这样做：

var length = $('ul#restaurant-rate .selected[data-interest]').size();
console.log(length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="restaurant-rate">
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "2" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "3" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "4" ></span></a></li>
  <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span></a></li>
</ul>

Answer 3

    <!DOCTYPE html>
    <html>
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>

    <body>
    <ul class="star-list" id="restaurant-rate">
        <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest = "1" >1</span></a></li>
        <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "2" ></span>2</a></li>
        <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "3" ></span>3</a></li>
        <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "4" ></span>4</a></li>
        <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest = "5" ></span>5</a></li>
     </ul>

   <script>

      $(document).ready(function(){

      var interest = $(".selected").last().data("interest");
      alert(interest);

      });

</script>

    </body>
    </html>

Answer 4

var interest = $('ul#restaurant-rate li').find('.selected').data('interest');
    alert(interest);

Answer 5

您应该在.find('li .selected')之前添加空格：

＆＃13;

function myFunction() {
  // Get the last select li element
  var $interest = $('ul#restaurant-rate').find('li .selected');
  console.log($interest.get($interest.length -1));
  
  // Use the div to parse the html of the element
  var div = $("#myDiv");
  div.html($interest.get($interest.length -1));
  console.log(div.find('.selected').data('interest'));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="star-list" id="restaurant-rate">
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest="1" >1</span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest="2" >2</span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item selected"  data-interest="3" >3</span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest="4" >4</span></a></li>
    <li><a href="javascript:void(0);"><span class="ico-sprite star-item"  data-interest="5" >5</span></a></li>
 </ul>
 
<button onclick="myFunction()">Click me</button>

<div style="visibility: hidden;" id="myDiv">Click me</div>

＆＃13;

试图通过ul id读取li列表的数据

5 个答案: