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

Question

我已经坐了一段时间试图解决一个问题，我确信这个问题非常简单，但就是无法让它发挥作用。

我得到了这个 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 内容 中插入一些内容。

但对于我来说，我就是无法选择 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 树有些东西让我感到困惑。我希望每个下拉菜单都在右列的右包装 div 中插入一些内容，并且我想尝试在不使用某些数字“ID”的情况下执行此操作，而只需选择“最接近的”内容 div 并在其中插入数据。

我该如何去做呢？

如果非常感谢，请提供任何帮助

-干杯

Answer 1

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