jQuery查找无法找到类

时间:2018-06-27 23:04:50

标签: javascript jquery html

我有一个字符串,它是从ajax调用返回的响应,它具有完整页面的所有html。我正在尝试寻找一个类,但由于某种原因找不到它。

var container = $(response).find(".container").text();

var container = $(response).find(".container").html();

不返回任何内容

但如果我尝试

$(response).find("h1").text();

它确实返回html响应中的h1标签内的文本

这是我在JS中寻找.container类的地方

var options = {
  url: scope.enumControllers.saveEvent,
  type: "post",
  data: viewModel
};

$.ajax(options)
  .done(function(response) {
    if (response.error === true) {

      yb.base.eventAlert(response.message, "error");
    } else {

      var container = $(response).find(".container").text();

      //$("html").html(response);
      //var $htmlDoc = $(response);

      // var container = $htmlDoc.find(".container").text();


      //$("div.container").text(container);

    }
  })
  .always(function() {

  })
  .fail(function(jqXHR, textStatus) {
    yb.base.eventAlert("Error saving data. Please contact the help desk.", "error");
  });

这是服务器返回的响应字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

  <title>Yogabandy</title>
  <link href="/Content/jquery-ui-datepicker-1.12.1/jquery-ui.min.css" rel="stylesheet" />
  <link href="/Content/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
  <link href="/Content/bootstrap.min.css" rel="stylesheet" />
  <link href="/Content/ladda/ladda-themeless.min.css" rel="stylesheet" />
  <link href="/Content/pretty-checkable-2.1.2/prettyCheckable.css" rel="stylesheet" />
  <link href="/Content/bootstrap-select-1.11.2/bootstrap-select.min.css" rel="stylesheet" />
  <link href="/Content/jm-spinner/jm.spinner.min.css" rel="stylesheet" />
  <link href="/Content/Site.css" rel="stylesheet" />


  <script src="/Scripts/modernizr-2.8.3.js"></script>

</head>

<body>





  <nav class="navbar navbar-default ">
    <div class="container-fluid">
      <div id="navbarHeader" class="navbar-header">
        <button id="collapsedButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false">
                <div id="logo">
                    <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 1em; width: 1em; display: block; fill: currentcolor;">
                        <path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path>
                    </svg>
                </div>
                <span id="leftToggleCaret" class="caret"></span>
            </button>
        <a id="navbarBrand" class="navbar-brand" style="color: #008489;" href="/">Yogabandy</a>
        <form id="navbarForm" class="navbar-form navbar-left" action="/Home/Events" method="get">
          <input id="date" type="hidden" name="date" />
          <input id="formattedaddress" type="hidden" name="formattedaddress" />
          <input id="latitude" type="hidden" name="latitude" />
          <input id="longitude" type="hidden" name="longitude" />
          <input id="maptype" type="hidden" name="maptype" />
          <input id="style" type="hidden" name="style" />
          <input id="privacy" type="hidden" name="privacy" />
          <input id="uid" type="hidden" name="uid" />

          <div id="navbarFormGroup" class="form-group">
            <div id="navbarInputGroup" class="input-group">

              <input id="navbarSearchField" type="text" class="form-control searchInputsHeight fal" style="font-family:Arial, 'Font Awesome 5 Pro'; color: #777;  font-size: 18px;" placeholder="&#xf002;  Location" aria-describedby="navbarDate" />

              <div id="navbarFilterButtons" class="input-group-btn">

                <input id="navbarDate" type="button" class="btn btn-default searchInputsHeight" value="Jun 27" />

                <div class="btn-group">
                  <button id="navbarPrivacy" type="button" class="btn btn-default dropdown-toggle searchInputsHeight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Any <span class="caret"></span></button>
                  <ul id="navbarDropdownPrivacy" class="dropdown-menu" role="group" aria-labelledby="navbarPrivacy">
                    <li><a class="privacyDropDown">Any</a></li>
                    <li><a class="privacyDropDown">Public</a></li>
                    <li><a class="privacyDropDown">Private</a></li>
                  </ul>
                </div>

                <div class="btn-group">
                  <button id="navbarStyle" type="button" class="btn btn-default dropdown-toggle searchInputsHeight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Style <span class="caret"></span></button>
                  <ul id="navbarDropdown" class="dropdown-menu" role="group" aria-labelledby="navbarStyle">
                    <li><a class="styleDropDown">Any</a></li>
                    <li><a class="styleDropDown">Anusara</a></li>
                    <li><a class="styleDropDown">Ashtanga</a></li>
                    <li><a class="styleDropDown">Bikram</a></li>
                    <li><a class="styleDropDown">Hatha</a></li>
                    <li><a class="styleDropDown">Iyengar</a></li>
                    <li><a class="styleDropDown">Jivamukti</a></li>
                    <li><a class="styleDropDown">Kripalu</a></li>
                    <li><a class="styleDropDown">Kundalini</a></li>
                    <li><a class="styleDropDown">Power</a></li>
                    <li><a class="styleDropDown">Prenatal</a></li>
                    <li><a class="styleDropDown">Restorative</a></li>
                    <li><a class="styleDropDown">Sivananda</a></li>
                    <li><a class="styleDropDown">Viniyoga</a></li>
                    <li><a class="styleDropDown">Yin</a></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>
        </form>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div id="navbarCollapse" class="collapse navbar-collapse">

        <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="FQFMJ4D0_hzXtrMRK2zYhMh-OLz5RdA8VObx606G4qNckHa_Cwge9WhF2JudLV9Ih_A4mJlZFDTC3yKgZlzQNsMsMZK4gQrubyeAopLM9NNtJQv9MukGWpMAbOfd5veSKUPajMRVsN4r1urLpOIz-w2" />
          <div id="desktopNavbarRight">
            <ul class="nav navbar-nav navbar-right" style="margin-right: 15px;">

              <li><a class="" href="/Help/Faq" id="helpLink">Help</a></li>

              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu<span class="caret"></span></a>
                <ul id="navbarDropdownMenu" class="dropdown-menu" role="menu">
                  <li><a class="" href="/user/notification">Account</a></li>
                  <li><a class="" href="/profile/general">Profile</a></li>
                  <li><a class="" href="/requests/received_active">Requests</a></li>
                  <li><a class="" href="/spaces">Yogabands</a></li>
                  <li><a class="slick-date-schedule" href="/schedule/host">Schedule</a></li>
                  <li><a class="" href="/message">Messages</a></li>
                  <li><a class="" href="/following/members">Following</a></li>
                  <li><a class="" href="/invite">Invite Friend</a></li>
                  <li><a class="" href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                </ul>
              </li>

            </ul>
          </div>
          <div id="mobileNavbarRight">
            <ul class="nav navbar-nav navbar-right" style="margin-right: 15px;">
              <li id="homeListItem"><a class="" href="/" id="homeLink">Home</a></li>
              <li>
                <hr class="navbar-seperator" />
              </li>
              <li><a class="" href="/Help/Faq" id="helpLink">Help</a></li>
              <li>
                <hr class="navbar-seperator" />
              </li>
              <li><a class="" href="/user/notification">Account</a></li>
              <li><a class="" href="/profile/general">Profile</a></li>
              <li><a class="" href="/requests/pending">Requests</a></li>
              <li><a class="" href="/spaces">Yogabands</a></li>
              <li><a class="" href="/schedule/host">Schedule</a></li>
              <li><a class="" href="/message">Messages</a></li>
              <li><a class="" href="/following/members">Following</a></li>
              <li><a class="" href="/invite">Invite Friend</a></li>
              <li>
                <hr class="navbar-seperator" />
              </li>
              <li id="bottomListItem"><a class="" href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
            </ul>
          </div>
        </form>
      </div>
    </div>

  </nav>



  <noscript>
        <div class="javascriptRequired">
            NOTICE: This web application requires JavaScript in order to function properly. Please enable it before continuing.
        </div>
    </noscript>

  <div class="container test">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3" style="margin-top: 10%; text-align: center; color: #008489;">
        <div id="createYogabandLogo" style="margin-top: 0 !important;">
          <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 1em; width: 1em; display: block; fill: currentcolor;"><path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path></svg>
        </div>

        <h1>All done!</h1>
        <h3>Thanks for attending a Yogabandy event</h3>


      </div>
    </div>

  </div>


  
  <script>
    var action = "event";
    var controller = "rate";
  </script>
  <script src="/Scripts/jquery-3.1.1.js"></script>

  <script src="/Scripts/bootstrap.js"></script>
  <script src="/Scripts/respond.js"></script>

  <script src="/Scripts/jquery.validate.js"></script>
  <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

  <script src="/Scripts/jquery-ui-datepicker-1.12.1/jquery-ui.min.js"></script>
  <script src="/Scripts/bootstrap-notify/bootstrap-notify.min.js"></script>
  <script src="/Scripts/fullcalendar-3.5.1/moment.min.js"></script>
  <script src="/Scripts/underscore-1.8.3/underscore-min.js"></script>
  <script src="/Scripts/ladda/spin.min.js"></script>
  <script src="/Scripts/ladda/ladda.min.js"></script>
  <script src="/Scripts/pretty-checkable-2.1.2/prettyCheckable.min.js"></script>
  <script src="/Scripts/bootstrap-select-1.11.2/bootstrap-select.min.js"></script>
  <script src="/Scripts/jm-spinner/jm.spinner.min.js"></script>
  <script src="/Scripts/yogabandy-base/yogabandy-base.js"></script>


</body>

</html>

1 个答案:

答案 0 :(得分:1)

我通过使用它来使其工作:

var container = $("<div/>").html(response).find('.container').html();

这应该是与浏览器有关的行为,您可以查看以下内容:

参考:Ajax Response Finding HTML Fragments Using Find