Javascript jQuery如何检测从json文件加载的li元素的id

我有一个

ul

元素，它保存从

json

文件加载的

li

元素。我想根据单击的

li

元素的

id

，将json文件中的一些数据传递到另一个页面（jquery移动页面）。由于某种原因，我不能使它工作。我错过了什么

这是我的

json

文件的结构

    {
        "abc":
         [
            {
                "id": 1,
                "name": "Nikola Tesla",
                "image": "http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/640px-Tesla_circa_1890.jpeg",
                "price": "100"
            }
        ]
}

HTML代码：

             <!--PAGE WITH A LIST OF SCIENTISTS -->
<div data-role="page" id="scientists">
    <div data-role="header"><h3>great scientists</h3></div>
    <div data-role="content">
            <div>
                <ul data-role="listview" data-inset="true" data-filter="true" id="namesListView"></ul>
             </div>
     </div>
 </div>

                <!--A PAGE WITH all details about selected SCIENTIST -->
<div data-role="page" id="sc">
    <div id="details_of_selected"></div>
        <img id="pic" src=""/>
</div>

将数据从

json

加载到

li

s的代码

$.ajax({
    url:"scientists.json",
    dataType:"json",
    type:"get",
    cache:"false",
    success:function(data){
        console.log(data);
        $(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
        });
    },
    complete: function() {
        $('#namesListView').listview('refresh');
    }
});

$.ajax({
url:“scienties.json”，
数据类型：“json”，
键入：“获取”，
缓存：“false”，
成功：功能（数据）{
控制台日志（数据）；
$（data.abc）。每个（函数（索引、值）{
console.log（value.name）；
$（“#名称列表视图”）。追加（“
”）；
});
},
完成：函数（）{
$（'#namesListView'）。listview（'refresh'）；
}
});

试试看

$（函数（）{
风险值数据={
“abc”：
[
{
“id”：1，
“名称”：“尼古拉·特斯拉”，
“图像”：http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/640px-Tesla_circa_1890.jpeg",
“价格”：“100”
}
]
};
$.ajax({
//url:“/echo/json/”，
数据类型：“json”，
键入：“POST”、/“GET”
缓存：“false”，
//数据：{json:json.stringify（data）}，
成功：功能（数据）{
控制台日志（数据）；
$（data.abc）。每个（函数（索引、值）{
console.log（value.name）；
//在'li'后面加'id'`
$（“#名称列表视图”）.append（
”）；
});
},
完成：函数（）{
$（'#namesListView'）。listview（'refresh'）；
}
});
$（文档）.on（'单击'，'名称列表视图'），函数（e）{
//父级'li'的'log``id``
console.log（$（e.target）.parent（“li”）.attr（“id”）；
});
});

---

jsiddle

最好在从JSON检索的数组中添加数据索引

$(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li data-index='" + index + "'><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
        });

我还要添加一个变量来保存您的数据

var abc = [];

因此，您可以获得所需的数据。因此，就整体而言：

var abc = [];
$(document).ready(function()
{
    $.ajax({
        url:"scientists.json",
        dataType:"json",
        type:"get",
        cache:"false",
        success:function(data){
            abc = data.abc;
            $(abc).each(function(index,value){
                console.log(value.name);
                $("#namesListView").append("<li data-index='" + index + "'><a href='#sc' data-rel='dialog'>"+value.name+"</a></li>");
            });
        },
        complete: function() {
            $('#namesListView').listview('refresh');
        }
    });
});

$(document).on('click','#namesListView li',function(){ //  change here so you are clicking on an LI and not the parent UL element.
    var index = $(this).data('index');
    alert(abc[index].name);        
});

var abc=[]；
$（文档）.ready（函数（）
{
$.ajax({
url:“scienties.json”，
数据类型：“json”，
键入：“获取”，
缓存：“false”，
成功：功能（数据）{
abc=data.abc；
$（abc）.每个（功能）（索引、值）{
console.log（value.name）；
$（“#名称列表视图”）.append（“”）；
});
},
完成：函数（）{
$（'#namesListView'）。listview（'refresh'）；
}
});
});
$（document）.on（'click'，'#namesListView li'，function（）{//在此处更改，以便您单击的是一个li而不是父UL元素。
var index=$（this.data（'index'）；
警报（abc[index].name）；
});

您可以将整个项目传递给li的数据属性，如下所示：

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

    $myLi
        .data(value)
        .html($innerAnchor);

    $("#namesListView").append($myLi);

});

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");
    var dataToPass = {
        id: value.id,
        name: value.name
    };

    $myLi
        .data(dataToPass)
        .html($innerAnchor);

    $("#namesListView").append($myLi);
});

$(document).on('click','#namesListView li',function(){

    // the li element contains all scientist data

    var scientistDetails = $(this).data();
    console.log(scientistDetails.name, scientistDetails);     

});

$(document).ready(function()
{
    $.ajax({
        url:"scientists.json",
        dataType:"json",
        type:"get",
        cache:"false",
        success:function(data){

            data.abc.forEach(function(value){

                var $myLi = $('<li></li>');
                var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

                $myLi
                  .data(value)
                  .html($innerAnchor);

                $("#namesListView").append($myLi);
            });
        },
        complete: function() {
            $('#namesListView').listview('refresh');
        }
    });

    $(document).on('click','#namesListView li',function(){

        // the li element contains all scientist data

        var scientistDetails = $(this).data();
        console.log(scientistDetails.name, scientistDetails);     

    });
});

您的示例如下所示：

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

    $myLi
        .data(value)
        .html($innerAnchor);

    $("#namesListView").append($myLi);

});

data.abc.forEach(function(value){

    var $myLi = $('<li></li>');
    var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");
    var dataToPass = {
        id: value.id,
        name: value.name
    };

    $myLi
        .data(dataToPass)
        .html($innerAnchor);

    $("#namesListView").append($myLi);
});

$(document).on('click','#namesListView li',function(){

    // the li element contains all scientist data

    var scientistDetails = $(this).data();
    console.log(scientistDetails.name, scientistDetails);     

});

$(document).ready(function()
{
    $.ajax({
        url:"scientists.json",
        dataType:"json",
        type:"get",
        cache:"false",
        success:function(data){

            data.abc.forEach(function(value){

                var $myLi = $('<li></li>');
                var $innerAnchor = $("<a href='#sc' data-rel='dialog'>"+value.name+"</a>");

                $myLi
                  .data(value)
                  .html($innerAnchor);

                $("#namesListView").append($myLi);
            });
        },
        complete: function() {
            $('#namesListView').listview('refresh');
        }
    });

    $(document).on('click','#namesListView li',function(){

        // the li element contains all scientist data

        var scientistDetails = $(this).data();
        console.log(scientistDetails.name, scientistDetails);     

    });
});

$（文档）.ready（函数（）
{
$.ajax({
url:“scienties.json”，
数据类型：“json”，
键入：“获取”，
缓存：“false”，
成功：功能（数据）{
data.abc.forEach（函数（值）{
变量$myLi=$（'
'）；
变量$innerAnchor=$（“”）；
$myLi
.数据（值）
.html（$innerAnchor）；
$（“#名称列表视图”）.append（$myLi）；
});
},
完成：函数（）{
$（'#namesListView'）。listview（'refresh'）；
}
});
$（文档）。在（'单击'，'名称列表视图'，函数（）上）{
//li元素包含所有科学家数据
var scientistDetails=$（this）.data（）；
console.log（scientistDetails.name，scientistDetails）；
});
});

---

jsFIDLE

谢谢您的评论，但是当我在控制台中打印

myId

的值时，它是

ul

列表（namesListView）的名称。我在您提供的代码中没有看到任何

。如果您拥有其中一些，并且单击了它们，它将返回它们的id属性。我已经在

li

中添加了加载数据的代码。我如何将

json

中的

id

添加到持有它的

li

中（这样

li

将具有与

json

中的数据相同的

id

）？当您建议任何答案时，请尝试在您的答案中包含一些解释…对不起，简单的问题。。。加载UL时，是否已将ID添加到UL中的每个元素？如果没有id，那么jQuery将返回空白。

li

没有id，只有

li

s中的元素有属性，例如id。好的，您的问题是“根据单击的li元素的id”。莉丝没有自己的身份证。你也许可以得到索引。我将在下面给出答案。我有一个想法，用abc数组中对象的索引来代替。见下面的答案。