提取无序列表项值的值

Question

亲爱的所有我使用以下代码来提取水平显示图像的<li>的值。 HTML代码为

<div id="layoutInnerOptions">
<ul id="navigationItemsContainer" class="layouts_list">
<li class="layout_container" rel="0" value="temp1">
<img src="resources/Images/layout_bottom2.png" alt="bottom" rel="0" />
</li>
<li class="layout_container" rel="1" value="temp4">
<img src="resources/Images/layout_top2.png" alt="top" rel="1" />
</li>
<li class="layout_container" rel="2" value="temp3">
<img src="resources/Images/layout_menu2.png" alt="menu" rel="2" />
<li class="layout_container" rel="3" value="temp2">
<img src="resources/Images/layout_buttons2.png" alt="buttons" rel="3" />
</li>
</ul>
</div>

我使用jQuery获取<li>的值，如temp1，temp2，但无法通过使用以下代码获取值。

if (confirm('Are you sure you want to save this thing into the database?')==true) {
   var Apptxt = $("#AppNametxt").val();
   var Appdesc=$("#txtdesc").val();
   var Applayout=$("#navigationItemsContainer").val();
   $.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:Appdesc, Apptxt:Apptxt, Applayout:Applayout},        
      function(data) {
    $('#message').html("Content Saved");
  });
}

我希望你们都能帮助解决这个问题。 谢谢大家。

Answer 1

请将value=...更改为data-value=....并使用与以下类似的代码：

var Applayout= $("#navigationItemsContainer").find('li').map(function() { return $(this).data('value'); }).get().join(',');

SEE DEMO

修改

用户已将其要求更改为包含触发器 - 单击li项目 - 将代码更改为以下内容：

$(function() {
   $("#navigationItemsContainer").children( 'li' ).on( 'click', function() {
      if (confirm('Are you sure you want to save this thing into the database?')) {
         var Apptxt = .....;
         var Appdesc = ......;
         var Applayout = $( this ).data( 'value' );
         $.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:Appdesc, Apptxt:Apptxt, Applayout:Applayout}, function(data) {
            $('#message').html("Content Saved");
         });
      }
   });
});