jquery 如何取出一组元素中的 data-url？

我想取出每个url 给他绑定事件实现跳转，不要用a标签！如何做？
为什么取不到属性值？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <ul>
        
    </ul>
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
<script  type="text/javascript" charset="utf-8" >
    var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "http://www.mop.com/", "payed": "1", "amount": 15000.14885, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';
    var DATA=DATA.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1年$2月$3日');
    //console.log(DATA);

        var dataJSON=JSON.parse(DATA);
        var sort=dataJSON.sort(function(a,b){
         return a.status>b.status?-1:1
     });
    var template="<li class=  $status$ ><div><p>借款金额</p><p>$amount$</p><p > $status$ </p></div>"
            +"<div><p>借款日</p><p>$loan_time$</p></div>"
            +"<div><p>还款期限</p><p>$loan_limited$</p></div>"
            +"<div><p>已还</p><p>$payed$</p></div>"
            +"<div><p>借款编号</p><p>$load_no$</p><p class='test'  data-url=$agreement$>《借款协议》</p></div></li>"

            dataJSON.forEach(function(item){
                var tplReplace=template.replace("$amount$",function(num){
                    var num=item.amount;
                    var num = (num || 0).toString(), result = '';
                            while (num.length > 3) {
                                    result = ',' + num.slice(-3) + result;
                                    num = num.slice(0, num.length - 3);
                                }
                                if (num) { result = num + result; }
                                return result
                                   })
                .replace("$status$",item.status.toLowerCase())
                 .replace("$status$",function(){
                     if(item.status=="IN_PROGRESS"){
                         return 　"进行中"
                     }
                     else{
                         return "已完结"
                     }
                 })
                .replace("$loan_time$",item.loan_time)
                .replace("$loan_limited$",item.loan_limited)
                .replace("$payed$",item.payed)
                .replace("$agreement$",item.agreement)
                .replace("$load_no$",item.load_no);

                $("ul").append(tplReplace);
                
            })

            $(".test").bind("click", function(){
                console.log($(this).data('url'));
                alert("!!!!");
                    window.location.href = $(this).data('url');
                })

</script>
</html>

第一你$没定义，要么就是没引入JQ库，第二，test[i]，你研究下写法对还是错。

当 $(".test").length > 1 时，jQuery返回的是DOM原生节点，和 document.getElementsByTagName('p') 返回的结果一样，这里的$(".test")[i]没有被jQuery生成一个jQuery对象，并赋予通过prototype定义的一些方法和属性，因此根本没有test[i].attr这个方法。所以就造成了$(test[i]).data("url")这个h5原生方法能够获取属性值而test[i].attr这个方法不能获取，希望对你有帮助。

$(test[i]).data("url")

【热门文章】