这个jQuery Selector的问题

大家好我有一个（可能）简单的问题，但我只是不明白为什么它不工作。这个jQuery Selector的问题

下面的代码应该是相当容易做到：

<?php 
require('../db.php'); 
?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Website Checker</title> 

<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.simpletip-1.3.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

$('#check').click(function(){ 

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow'); 

$('#site-list li.websites').each(function() 
{ 
    //var newurl = $(this).find('span.url a').attr('href'); 
    var newurl = $(this).find('span.url').html(); 
    $.ajax(
    { 
     type: "POST", 
     url:  "process.php", 
     data: ({"a":newurl}), 
     cache: false, 
     success: function(message) 
     { 
      $(this).find('span.http-status').html(message); 
     } //End AJAX return 
    }); //End AJAX call 
    }); //End li each 
}); //End Check 

$('#check').click(); 

}); 

</script> 

<ul id="site-list" class="list"> 
<li class="title"> 
    <span class="id"></span> 
    <span class="name">Title</span> 
    <span class="url">URL</span> 
    <span class="status">HTTP Status</span> 
</li> 
<?php 
// some PHP to fetch all the gig entries from the shows table 
$sql = "SELECT * FROM `check`"; 
$query = mysql_query($sql) or die(mysql_error()); 
// a loop to place all the values in the appropriate table cells 
while ($row = mysql_fetch_array($query)){ 
//begin the loop... 
$id=$row['id']; 
$name=$row['name']; 
$url=$row['url']; 
?> 
<li class="websites"> 
    <span class="id"><?php echo $id; ?></span> 
    <span class="name"><?php echo $name; ?></span> 
    <span class="url"><?php echo $url; ?></span> 
    <span class="status http-status"></span> 
</li> 

<?php 
} 
?> 
</ul> 
<br /> 
<a href="#" id="check" class="button">Check Now</a>

这基本上是从一个数据库拉网站数据并将其呈现给用户，并且我所试图做的是当你单击该按钮每个站点的http代码进行检查和显示（也可以在页面首次加载时运行）

这似乎工作正常 - 正确的数据发送和接收，但之后，微调框仍然存在！

链接：http://www.4playtheband.co.uk/check/

process.php（如果它帮助）：

<?php 
require('../db.php'); 

$url= NULL; 
if(isset($_POST['a'])) { $url = mysql_real_escape_string($_POST['a']); } 

function Visit($url) 
{ 
$agent = "Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)";$ch=curl_init(); 
curl_setopt ($ch, CURLOPT_URL,$url); 
curl_setopt($ch, CURLOPT_USERAGENT, $agent); 
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt ($ch,CURLOPT_VERBOSE,false); 
curl_setopt($ch, CURLOPT_TIMEOUT, 5); 
$page=curl_exec($ch); 

//echo curl_error($ch); 
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
curl_close($ch); 

if($httpcode>=200 && $httpcode<300) 
{ 
    echo '<span class="up">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is up"/></span></span>'; exit; 
} 
else 
{ 
    $httpcode=404; 

    $date = date("l, j \of F Y \@ H:i"); 

    $to  = "[email protected]"; 
    $subject = "Urgent: $url is down"; 
    $message = "Hello,\n\nIt appears that on our latest check of $url on $date that the site was down.\n\nRegards,\nWeb Checker"; 
    $headers = 'From: [email protected]' . "\r\n" . 
      'Reply-To: [email protected]' . "\r\n"; 

    mail($to, $subject, $message, $headers); 
    echo '<span class="down">'.$httpcode.'<span class="icon"><img src="images/info.png" alt="website is down"/></span></span>'; exit; 
} 
} 

if(!empty($url)){ Visit($url); exit; } 

?>

来源

2011-09-02 martincarlin87

你应该参考.http-status元素中的每个li成功回调。由于您在循环中调用ajax，因此我们需要将每个li对象存储到本地变量中，并通过调用将设置状态消息的方法来创建闭包。试试这个

$('#check').click(function(){ 

$('.http-status').html('<img src="images/spinner.gif"/>').fadeOut('slow').fadeIn('slow'); 


$('#site-list li.websites').each(function() 
{ 
    var $li = $(this); 

    //var newurl = $(this).find('span.url a').attr('href'); 
    var newurl = $(this).find('span.url').html(); 
    $.ajax(
    { 
     type: "POST", 
     url:  "process.php", 
     data: ({"a":newurl}), 
     cache: false, 
     success: function(message) 
     { 
      setStatusMessage(message, $li); 

     } //End AJAX return 
    }); //End AJAX call 
    }); //End li each 
}); //End Check 

    function setStatusMessage(message, li){ 
     li.find('.http-status').html(message); 
    }

来源

2011-09-02 15:11:53 ShankarSangoli

看起来你只是设置的.http状态的消息 '跨度'，所以微调仍处于.http状态

需要清除.http状态::

success: function(message) 
    { 
     $('.http-status').html(''); 
     $(this).find('span.http-status').html(message); 
    } //End AJAX return

来源

2011-09-02 15:10:25 NateB

感谢，跨度是现在AJAX调用后清空，但响应消息仍未显示：/ – martincarlin87

跨度不应该被清空，多数民众赞成在你把你的数据，它看起来像...在填充跨度之前，需要清空父容器$（'。http-status'），这将移除微调器 – NateB

的问题是在这里：

$(this).find('span.http-status').html(message);

按照[jQuery的.ajax文献] [1]：

所有的回调中的这个基准是在传递到$就上下文选项对象设置;如果未指定上下文，则这是对Ajax设置本身的引用。

要解决这个问题，你可以的$(this)值分配给另一个变量，并访问在success回调的身体变化：

$('#site-list li.websites').each(function() 
{ 
    theElement = $(this); 
    var newurl = $(this).find('span.url').html(); 
    $.ajax(
    { 
     // ... 
     success: function(message) 
     { 
      theElement.html(message); 
     } //End AJAX return

来源

2011-09-02 15:11:02

这个jQuery Selector的问题

回答

相关问题