来自LI标签的data_url属性值的数组

时间:2016-01-12 09:31:51

标签: jquery jquery-selectors custom-data-attribute

需要根据LI标签的data_url属性的值创建数组。 我的HTML代码:

<li class='has-sub'>
    <a href="#"><span class="record-date"><?=$key?></span><span class="record-num"><span id="records_quantity"><?=$quantity?></span>   записей</span></a>
    <ul>
        <li id="1" data-url="mp3/1.mp3">
            <span class="button-play"><input type="hidden" name="file_name" value="     mp3/1.mp3"></span>
            <span class="record-time">11:30 - 11:45</span>
            <a href="#" class="record-del" id="1"></a>
            <a href="mp3/1.mp3" class="record-load" download></a>
        </li>
        <li id="2" data-url="mp3/2.mp3">
            <span class="button-play"><input type="hidden" name="file_name" value="      mp3/1.mp3"></span>
            <span class="record-time">11:45 - 11:55</span>
            <a href="#" class="record-  del" id="1"></a>
            <a href="mp3/2.mp3" class="record-load" download></a>
        </li>
    </ul>
</li>

如何制作正确的阵列?

1 个答案:

答案 0 :(得分:0)

您可以将.map()功能与.get()一起使用:

var datauriarr = $('li[data-url]').map(function(){
   return $(this).data('url');
}).get();

$(function(){
var datauriarr = $('li[data-url]').map(function(){
   return $(this).data('url');
}).get();
alert(datauriarr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='has-sub'>
   <a href="#"><span class="record-date"><?=$key?></span><span class="record-num"><span id="records_quantity"><?=$quantity?></span>   записей</span></a>
<ul>
<li id="1" data-url="mp3/1.mp3">
    <span class="button-play"><input type="hidden" name="file_name" value="     mp3/1.mp3"></span>
    <span class="record-time">11:30 - 11:45</span><a href="#" class="record-del" id="1"></a><a href="mp3/1.mp3" class="record-load" download></a>
</li>
 <li id="2" data-url="mp3/2.mp3">
    <span class="button-play"><input type="hidden" name="file_name" value="      mp3/1.mp3"></span>
    <span class="record-time">11:45 - 11:55</span><a href="#" class="record-  del" id="1"></a><a href="mp3/2.mp3" class="record-load" download></a>
</li>
</ul>
</li>
</ul>