3

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

我得到了这个 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。

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

我的 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”的情况下执行此操作，但只需选择“最接近”的内容div 并插入这里面的数据。

我该怎么做呢？

如果非常感谢任何帮助

-干杯

4

5 回答 5

3

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

于 2013-07-02T16:03:28.653 回答
0

我想你可以试试

var col = $(this).closest("div.add").prev();
于 2013-07-02T16:11:22.610 回答
0

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

$(this).closest(".add").prev();
于 2013-07-02T16:11:56.753 回答
0

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

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

$(this).parents(".row").find("#content").first().append('some stuff');
于 2013-07-02T16:12:51.337 回答
0

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);
    }
于 2013-07-02T16:19:45.567 回答