Question

你们其中一个jQuery国王请告诉我为什么我的script.asp不会为每个单独的按钮加载？我修改了代码格式http://www.sitepoint.com/ajax-jquery/。感谢

<html>  
<head>  
<title>AJAX with jQuery Example</title>  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
<body>  
<div id="wrapper">  

  <script type="text/javascript">  
    $(document).ready(function(){  
      $(".generate").click(function(){  
        $(this).find('div.quote').load("script.asp");  
      });  
    });  
  </script>

<input type="submit" id="generate1" class="generate" value="Generate!"><br />  
<div class="quote"></div><br><br>  

<input type="submit" id="generate2" class="generate" value="Generate!"><br />  
<div class="quote"></div><br><br>  

<input type="submit" id="generate3" class="generate" value="Generate!"><br />  
<div class="quote"></div>  

</div>  
</body>  
</html>

Answer 1

.find()假设有一些元素嵌套在您要查询的元素中。但是，您的元素位于您正在使用的元素旁边。

试试这个：

$(this).next('.quote').load('script.asp');

Answer 2

您需要使用nextAll和first来选择最近的div.quote兄弟：

$(".generate").click(function(){  
    $(this).nextAll('div.quote').first().load("script.asp");  
});

.find找到选择器的所有后代与给定的选择器匹配，而不是你想要的兄弟姐妹。

Answer 3

您的.find(在.generate类中找到（包含在内） .nextAll(找到应用了选择器的所有SIBLINGS：首先当然是所选兄弟姐妹中的第一个

$(".generate").click(function(){
   $(this).nextAll('div.quote:first').load("script.asp");
});

一个替代方法是将输入和引用div包装在另一个div中然后执行：

<div class='quoteHolder'>
    <input type="button" id="generate1" class="generate" value="Generate!"><br /> 
    <div class="quote"></div>
</div>

$(".generate").click(function(){
       $(this).parent().find('div.quote').load("script.asp");   
});

注意：在我的示例中，我将输入类型更改为“按钮”，因为它现在不是真正的提交，这将导致其他有趣的挑战。

jQuery Ajax - 返回特定DIV的值

3 个答案: