jQuery：使用选择器单击选择上一个/最近的 div答案

【问题标题】：jQuery: Click select Previous / Closest div with selectorjQuery：使用选择器单击选择上一个/最近的 div
【发布时间】：2013-06-30 02:22:03
【问题描述】：

我已经坐了一段时间，试图解决一个我确信很简单但无法解决的问题。

我得到了这个 HTML：

<div class="span4">
    <div id="content" class="col-1"></div>
  <div class="add">
    <div class="dropdown btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Add element
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" id="addToColumn" data-col="1">
            <li><a href="#" id="headline">Headline</a></li>
            <li><a href="#" id="file">File</a></li>
            <li><a href="#" id="linebreak">Linebreak</a></li>
        </ul>
    </div>
  </div>
</div>

这被包裹在一个 div (class=row) 中，该 div 再次被包裹在另一个 div (class=container) 中。

现在，当我按下三个链接（标题、文件或换行符）中的任何一个时，我有一些 JS 来做一些 ajax，然后在空的 div content 中插入一些内容。

但是对于我来说，我就是无法选择 div。

我应该提到，代码块重复了三次，所以我有三列，每列都包含相同的下拉菜单和相同的三个链接，我想让它尽可能灵活（在我使用一些不同的数据之前- ? 属性，但我想尽可能少地使用这些属性）。

我的 JS 代码现在看起来像这样：

$("#addToColumn li a").click(function() {
    var elementType = $(this).attr('id');

// I’ve tried this but with no luck:
var col = $(this).closest("div#content");
    // AND
    var col = $(this).prev("div#content");
}

有些东西让我对这个 DOM 树感到困惑。我希望每个下拉菜单都在右列的正确 wrapper-div 中插入一些内容，并且我想尝试在不使用某些数字“ID”的情况下执行此操作，但只需选择“最接近的”content div 并在其中插入数据。

我该怎么做？

如果非常感谢任何帮助

-干杯

【问题讨论】：

标签： jquery jquery-selectors this parent closest

【解决方案1】：

您只能有 1 个元素具有 id="content"。拥有多个是无效的，并且可能导致意外行为。其余的代码似乎是正确的。如果您将id 更改为class，则以下内容应该有效：var col = $(this).parents(".row").find(".content");。 id="addToColumn" 也是如此，id 是唯一的 - 请改用类。

【讨论】：

除非 OP 只有一个 id 为“content”的 div。然后（s）他可以简单地使用jQuery('#content')或jQuery(document.getElementById('content'))
他明确表示“代码块重复了3次”+否则代码是正确的。
var col = $(this).closest("div.content"); 是错误的。 content 不是 $(this) 的父母，但我同意 id 需要是唯一的。
谢谢大家！我使用了您的代码 Yotam Omer 和一些名称更改，但其他方面完全相同。我没有使用（“.row”），而是将其更改为（“.span4”）。你对身份证的看法是绝对正确的——我不知道我在想什么，但下次我遇到同样的问题时应该很清楚。再次感谢，你拯救了我的一天:-)

【解决方案2】：

我觉得你可以试试

var col = $(this).closest("div.add").prev();

【讨论】：

【解决方案3】：

您可以使用 jquery 中的 parents() 函数，然后向下遍历。虽然 Yotam 更正确，但 id 应该是唯一的。

喜欢这个小提琴：http://jsfiddle.net/WHSpU/

$(this).parents(".row").find("#content").first().append('some stuff');

【讨论】：

【解决方案4】：

HTML

   <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="1">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="2">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="content"></div>
      <div class="add">
        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Add element
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu addToColumn" data-col="3">
                <li><a href="#" class="headline">Headline</a></li>
                <li><a href="#" class="file">File</a></li>
                <li><a href="#" class="linebreak">Linebreak</a></li>
            </ul>
        </div>
      </div>
    </div>

Javascript

    $(".addToColumn li a").on('click', function(e) {
        e.preventDefault();
        var myContentDiv = $(this).closest('.content');
        myContentDiv.load(myData);
    }

【讨论】：

【解决方案5】：

由于#content 不是a 的父级，而.prev() 仅适用于兄弟姐妹，因此您需要获得最接近的父级，即#content 的兄弟姐妹：

$(this).closest(".add").prev();

【讨论】：