javascript - jquery 选择选定 div 嵌套的最外层 div

Question

我正在尝试使用 jQuery 选择一个 div，但忽略所有选择的 div，它们是所选 div 的子级。除了我匹配的 HREF 之外，divs 没有任何其他方法可以识别它们。例如:

outerdiv = $('a[href^="http://bizmate."]').closest('div');
outerdiv.prepend("This was selected")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Won't be selected
  <div>
    Powered by <a href="http://bizmate.in">Bizmate</a>
    <div>
      Powered by <a href="http://bizmate.in">Bizmate</a>
      <div>
        Powered by <a href="http://bizmate.in">Bizmate</a>
      </div>
    </div>
  </div>
</div>

<div>
  <div>
    Powered by <a href="http://bizmate.in">Bizmate</a>
  </div>
</div>

此代码选择所有 div，包括子项。我如何限制它只选择满足条件的最外层 div 而忽略也满足给定条件的子 divs？

编辑:

目前，该示例将给出:

不会被选中
这是由 Bizmate 提供支持
这是由 Bizmate 提供支持
这是由 Bizmate 提供支持
这是由 Bizmate 提供支持

我希望结果是:

不会被选中
这是由 Bizmate 提供支持
由 Bizmate 提供技术支持
由 Bizmate 提供技术支持
这是由 Bizmate 选择的

Answer 1

这将根据在树下找到的链接数量过滤掉子节点，从而选择任何顶级父节点，而不管集群的数量或其确切结构:

var link = 'a[href^="http://bizmate."]',

outerdiv = $(link).filter(function() {

    var total = $(this).parents('div:last').find(link).length;

    if (total > 1) {
      var parent = $(this).closest('div').find(link).length;
      if (parent == total) return $(this);
    }
    else return $(this);

}).closest('div');

outerdiv.prepend("This was selected");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Won't be selected
  <div>
    Powered by <a href="http://bizmate.in">Bizmate</a>
    <div>
      Powered by <a href="http://bizmate.in">Bizmate</a>
      <div>
        Powered by <a href="http://bizmate.in">Bizmate</a>
      </div>
    </div>
  </div>
</div>

<div>
  <div>
    Powered by <a href="http://bizmate.in">Bizmate</a>
  </div>
</div>