javascript - prevAll() 在更复杂的 DOM 中不起作用

Question

单击按钮后，我尝试在 DOM 中进一步选择单个同级。我只想向上找到最接近的同级(在生产中，按钮之间有更多的 HTML，因此更有必要以这种方式将其拆分)。我使用 prevAll(selector:first) 来执行此操作，当我使用非常简单的版本 ( here ) 时，它似乎工作正常。但是当我以更类似于我的实际环境的方式执行此操作时， prevAll() 似乎无法找到同级元素 div.googleMapsContainer:

这是我的 HTML:

  <div style="display: none;" class="googleMapsContainer" id="gm1">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>

 <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>

 <div style="display: none;" class="googleMapsContainer" id="gm2">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>

    <br>

    <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>

这是我的 JavaScript:

$(document).on('click', '.gmapInit', function() {
    console.log("here is this: ");
    console.log($(this));
    var closeThing = $(this).prevAll("div.googleMapsContainer:first");
    console.log("here is the closest: ");
    console.log(closeThing);
    closeThing.attr("style", "");
});

控制台显示 closeThing 没有任何结果，因为 prevAll 没有成功。这是一个用于演示的 JsFiddle:https://jsfiddle.net/NateH06/twk9mtjg/

Answer 1

这个对我有用，我刚刚修改了你的 fiddle 。

我选择了同一范围内的父 div，然后使用您的 prevAll() 调用来精确我的选择。当您在实际项目中尝试此操作时会发生什么？

看看:

$(document).on('click', '.gmapInit', function() {
    var closeThing = $(this).parents("div.tableProcessingToolBarContainer").prevAll("div.googleMapsContainer:first");
    closeThing.attr("style", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;" class="googleMapsContainer" id="gm1">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>
 
 <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>
 
 <div style="display: none;" class="googleMapsContainer" id="gm2">
        <div class="gmap" style="max-width: 80%;
            max-height: 400px;
            background-color: grey;" class="map">
        </div>
        This Text Should be visible after click
 </div>

    <br>
    
    <div class="tableProcessingToolBarContainer">
      <div class="container-fluid tableProcessingTools" >
        <div class="row-fluid">
         <div class="appSliderContent tptSliderContent container-fluid ">
                <button class="gmapInit glassyButton">View data in Google Maps</button>
         </div>
        </div>
      </div>
    </div>