使用PHP和/或jQuery將內容添加到現有的有序列表中？

Question

使用銷售CD的店面（WooCommerce / WordPress），每個相冊/產品頁面都有一個已存在於標准WordPress編輯器字段中的有序列表中的軌道列表。 現在我需要能夠為軌道列表中的每個軌道添加音頻樣本。 但是，我不是手動添加每個音頻軌道/播放器，而是尋求幫助在產品模板中創建一個功能，該功能將在每個“li”元素之前（或之內）添加音頻樣本軌道。 以下是我為了讓玩家以正確的方式進入列表項目而獲得的，但問題是如何在列表中增加跟蹤編號。

function samples_audio(){
    $cloudbase = 'http://domain.com';
    $directory = get_post_meta(get_the_ID(), 'directory', true);
    $trackprep = 'track';
    $num = 0;
    $sep = '/';
    $source = $cloudbase.$sep.$catno.$sep.$trackprep.$num;
        ?>
        <script type="text/javascript">
            var AudioPlayer = "<?php echo $source; ?>";
            var TrackNo = 0 + 1;
            jQuery('.tracks li').before('<audio controls><source src="'+ AudioPlayer +''+ TrackNo +'.mp3" type="audio/mpeg"></audio>');
        </script>
        <?php 
}

在此先感謝您的幫助！

Answer 1

我能夠使用jquery的每個（）和索引函數來解決這個問題。 我將以下內容添加到WooCommerce中的content-single-product.php模板中：

<?php
$cloudbase = 'http://domain.com';
$directory = get_post_meta(get_the_ID(), 'directory', true);
$trackprep = 'track';
$sep = '/';
$source = $cloudbase.$sep.$catno.$sep.$trackprep.$num;
?>
<script type="text/javascript">
jQuery('.tracks li').each(function(indexInt){
    var AudioPlayer = "<?php echo $source; ?>";
    if (indexInt <= 9) {
        jQuery(this).before('<audio><source src="'+ AudioPlayer +'0'+ (indexInt +1 )+'.mp3" type="audio/mpeg"></audio>');
    }
    if (indexInt >= 10){
        jQuery(this).before('<audio><source src="'+ AudioPlayer +''+ (indexInt +1 )+'.mp3" type="audio/mpeg"></audio>');
    }
});
</script> 

希望將來幫助別人。