jQuery代码未生成预期结果
我试着写HTML代码，看到了吗jQuery代码未生成预期结果,jquery,Jquery,我试着写HTML代码，看到了吗 socket.on('listUser', function(data){ console.log(data); console.log(socket.id); for(var i =0 ; i<data.length; i++){ $('#listUser').append('<a href ="#" id="'+data[i].name+'" class="lis
socket.on('listUser', function(data){
console.log(data);
console.log(socket.id);
for(var i =0 ; i<data.length; i++){
$('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+data[i].socketId+'">' +data[i].name+ '</a>');
}
});
$('a').each(function(){
console.log($(this).attr('id'));
/*$(this).click(function(){
});*/
});
socket.on（'listUser'，函数（数据）{
控制台日志（数据）；
console.log（socket.id）；
对于（var i=0；i这是我的代码：
<!DOCTYPE html>
<!-- saved from url=(0040)http://getbootstrap.com/examples/signin/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Signin</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#viewContent{
color: black ;
height: 400px;
background-color: #F5F5F5;
overflow: scroll;
}
#listUser{
height: 400px;
}
</style>
</head>
<body>
<div id='header'>
<h2 class="title">This is chat box</h2>
</div>
<div id='content' >
<div id='listUser' class='col-md-4'>
<a id ='list' class = "list-group-item active">List User</a>
</div>
<div name='chatbox' class='col-md-8'>
<a id ='message' class = "list-group-item active">List User</a>
<div id='viewContent'>
</div>
<div name='formInput' >
<form class='' id='formChat'>
<div class="form-group">
<label class="sr-only" for="contentChat">Enter message</label>
<input type="text" class="form-control" id="contentChat" placeholder="Enter message" >
<input type='submit' class='btn btn-primary ' value ='Send'>
</div>
</form>
</div>
</div> <!-- chat box div -->
</div>
<script type="text/javascript">
jQuery(function($){
var socket = io.connect('http://localhost:8080');
var $contentChat = $('#contentChat'),
$send =$('formChat');
var emailLogin = '';
var listID = [];
var idSocket ;
socket.on('listUser', function(data){
console.log(data);
console.log(socket.id);
for(var i =0 ; i<data.length; i++){
$('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+
data[i].socketId+'">' +data[i].name+ '</a>').click(function(){
showSocketid(data[i].socketId,data[i].name);
});
}
});
$('a').each(function(){
console.log($(this).attr('id'));
/*$(this).click(function(){
});*/
});
function showSocketid(socketID , nameUser){
alert(socketID +'and'+ nameUser);
};
});
</script>
</body>
</html>
签名
#视图内容{
颜色：黑色；
高度：400px；
背景色：#F5；
溢出：滚动；
}
#列表用户{
高度：400px；
}
这是聊天室
）。单击（函数（）{
showSocketid（数据[i].socketId，数据[i].name）；
});
}
});
$（'a'）。每个（函数（）{
console.log（$（this.attr（'id'））；
/*$（此）。单击（函数（）{
});*/
});
函数showSocketid（socketID，nameUser）{
警报（socketID+'和'+nameUser）；
};
});
我只得到2个值：id=list和id=message？？那你想做什么？简单解释一下。你能在JSFIDLE或SO的预览器中创建并分享一个问题的演示吗？因为我有两个元素列表，在html代码中列出了你的名字，所以我不能在append函数之后访问jquery元素
<!DOCTYPE html>
<!-- saved from url=(0040)http://getbootstrap.com/examples/signin/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Signin</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style type="text/css">
#viewContent{
color: black ;
height: 400px;
background-color: #F5F5F5;
overflow: scroll;
}
#listUser{
height: 400px;
}
</style>
</head>
<body>
<div id='header'>
<h2 class="title">This is chat box</h2>
</div>
<div id='content' >
<div id='listUser' class='col-md-4'>
<a id ='list' class = "list-group-item active">List User</a>
</div>
<div name='chatbox' class='col-md-8'>
<a id ='message' class = "list-group-item active">List User</a>
<div id='viewContent'>
</div>
<div name='formInput' >
<form class='' id='formChat'>
<div class="form-group">
<label class="sr-only" for="contentChat">Enter message</label>
<input type="text" class="form-control" id="contentChat" placeholder="Enter message" >
<input type='submit' class='btn btn-primary ' value ='Send'>
</div>
</form>
</div>
</div> <!-- chat box div -->
</div>
<script type="text/javascript">
jQuery(function($){
var socket = io.connect('http://localhost:8080');
var $contentChat = $('#contentChat'),
$send =$('formChat');
var emailLogin = '';
var listID = [];
var idSocket ;
socket.on('listUser', function(data){
console.log(data);
console.log(socket.id);
for(var i =0 ; i<data.length; i++){
$('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+
data[i].socketId+'">' +data[i].name+ '</a>').click(function(){
showSocketid(data[i].socketId,data[i].name);
});
}
});
$('a').each(function(){
console.log($(this).attr('id'));
/*$(this).click(function(){
});*/
});
function showSocketid(socketID , nameUser){
alert(socketID +'and'+ nameUser);
};
});
</script>
</body>
</html>