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

这个对我有用，我刚修改了你的小提琴。

我选择了同一范围内的父div，然后使用{ "long_name": "Valladolid", "short_name": "VA", "types": [ "administrative_area_level_2", "political" ] },调用来精确选择。在实际的项目中尝试这种情况会发生什么？

看看：

＆＃13;

{
"long_name": "Seville",
"short_name": "Seville",
"types": [
"administrative_area_level_2",
"political"
]
},

＆＃13;

prevAll()

＆＃13;

prevAll（）不适用于更复杂的DOM

1 个答案: