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（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树感到困惑。我希望每个下拉菜单都在右侧列的右侧包装器中插入一些内容，我想尝试不使用某些数字“ID”进行操作，只需选择“最接近的”内容< / strong> div并在此处插入数据。

我该怎么做？

任何帮助，如果非常感激

-Cheers

Answer 1

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

Answer 2

我想你可以试试

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

Answer 3

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

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

Answer 4

你可以使用jquery中的parents（）函数然后遍历。虽然Yotam更正确，但id应该是唯一的。

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

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

Answer 5

<强> 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);
    }

jQuery：单击选择上一个/最近的div与选择器

5 个答案: