weixin_33681778 2018-04-15 22:30 采纳率: 0%
浏览 39

jQuery $ .ajax()查找方法

I'm having difficulty passing the data returned from the server to the correct element in my code, although I can see the response in the developer tools and find seems to return the correct selector. The example is from the book found here. My JavaScript file:

$('nav a').on('click',function(e){
var url = this.href
var $content = $('#content')
$('nav a.current').removeClass('current')

    type: "GET",
    url: url,
    timeout: 2000,
    beforeSend: function(){
        $content.append('<div id="load">Loading</div>')
    complete: function(){
    success: function(data){
        console.log($(data).find('#container')) // Object returned

    error: function(){
        $content.html('<div id="container">Please try again</div>')

The main HTML:

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>jQuery &amp; Ajax $.ajax() Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/c08.css">
            <a href="0038.html" class="current">HOME</a>
            <a href="0038A.html">ROUTE</a>
            <a href="0038B.html">TOYS</a>

    <section id="content" style="display: block;">
      <div id="container">
        <h2>Fifteen tons of fun!</h2>
        <div class="third">
          <img src="img/home1.jpg" alt="Quadcopter" />
          <p>Roll up! Roll up! All aboard, for the magical maker bus ride. Next August, we're heading from the west coast to east coast, sharing the maker fun as we travel in our vintage Leyland bus.</p>
        <div class="third">
          <img src="img/home2.jpg" alt="Circuit boards" />
          <p>Fly our JavaScript controlled quadcopters, filming the location from above as you soar with the birds. Or, if you prefer to stay on the ground, enter the maker jam.</p>
        <div class="third">
          <img src="img/home3.jpg" alt="Wheely thing" />
          <p>The theme of this year's maker-jams is the future of travel. We'll be piling our bus high with arduinos, breadboards, controllers, diodes, engravers, files... Enter today.</p>
    <script type="text/javascript" src="js/0038.js"></script>

The fragment for 0038A.html:

  <div id="container" class="location">
    <h2>The bus stops here.</h2>

    <div class="event">
      <img src="img/map-ca.png" alt="Map of San Francisco" />
      <p><b>SAN FRANCISCO, CA</b><br />May 1</p>
    <div class="event">
      <img src="img/map-tx.png" alt="Map of Texas" />
      <p><b>AUSTIN, TX</b><br />May 15</p>
    <div class="event">
      <img src="img/map-ny.png" alt="Map of New York" />
      <p><b>NEW YORK, NY</b><br />May 30</p>


And the fragment for 0038B.html

  <div id="container">
    <h2>Tinker, maker, solder, fly.</h2>

    <div class="third intro">
      <p>We can't wait to load up Barney, our faithful bus, with the widest range of toys we've ever taken on the road... </p><p>This year sees some impressive stats as we will be bringing 15 team members, 50km of cable, 50 arduino compatible boards, 25 laptops, 20 tablets, 10 mobile phones, 5 quadcopter kits, and a giant laser strapped to the roof. </p><p>We're also bringing a big top, which will provide shelter throughout the night as well as hosting talks and demonstrations from an impressive range of guest speakers.</p><p>And yes, we did say that we have a giant laser strapped to the roof of the bus. Let's see how often we get stopped for speeding this time!</p>
    <div class="third">
      <img src="img/toys1.jpg" alt="Circuit boards" />
      <p>Our new generator is so hefty we have to tow it on a dedicated trailer, but that's worth it because we're powering bigger projects than ever and we expect you to be tinkering throughout the night with our 24-hour maker-jams.</p>
    <div class="third">
      <img src="img/toys2.jpg" alt="Circuit boards" />
      <p>Our state of the art 3D printer is ready to help you take your own souvenirs home! The only catch is that you have to design them. We'll add each one to our open-source 3D designs library, and the designer of the best one gets to keep the printer.</p>


I wouldn't ask, but this has me stumped, and I know it's something simple. Thanks.


  • 写回答

1条回答 默认 最新

  • weixin_33698043 2018-04-15 22:50

    The .find() method searches descendant elements for matches, in your case, what you're searching for is at the top of the hierarchy so you get no matches. If your element is at the top level you don't need to do anything to get to it, unless of course, there is other top-level data you don't want. In which case you can use .filter()




  • ¥15 webSocket可以接TCP socket接口吗
  • ¥60 mpi并行出错,CFD++计算
  • ¥15 c#:vsto,powerpoint的外接程序中换主题颜色
  • ¥15 状态机/汽车转向灯/Sateflow
  • ¥15 这个有点复杂 有没有人看看
  • ¥15 用python如何确定子孙元素在父元素中的位置
  • ¥15 obj文件滤除异常高程
  • ¥15 用mathematicas或者matlab计算三重积分
  • ¥15 Loop unrolling的runtime计算
  • ¥100 NVMe-oF的Target端,开启attr_offload后,测试失败。