基于嵌套div和lis的e.preventdefault()

Question

我有一系列嵌套在一起的div，只有当ul有列表项时，我才想防止默认链接。见下面的例子：

​

$(function() {
  $(".layer-1").click(function(e) {
  	if (($(e.target).is(".link")) && ($(this, ".list").children().length == 0)) {
        console.log("following link!");
      } else {
        e.preventDefault();
      }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">Don't follow</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">follow!</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
        </ul>
      </div>
    </div>
  </div>
</div>

​

基本的前提是，我检查单击事件的目标是否是链接，并使用this来锁定UL并检查列表项的数量。如果为零，请按链接执行，否则为e.preventDefault()。似乎正在发生的是，它们都是preventDefault()，尽管有大量的列表项。

作为一个疑难解答，我的控制台记录了$(this, ".list").children().length，但始终是一个。为什么？如何在这个标记结构实例中以.list为目标？

我甚至说过：

​

$(function() {
  $(".layer-1").click(function(e) {
  console.log($(this, ".layer-1 > .layer-2 > .layer-3 > .layer-4 > .list").children().length)
  	if (($(e.target).is(".link")) && ($(this, ".layer-1 > .layer-2 > .layer-3 > .layer-4 > .list").children().length == 0)) {
        console.log("following link!");
      } else {
        e.preventDefault();
      }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">Don't follow</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">follow!</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
        </ul>
      </div>
    </div>
  </div>
</div>

​

并且在我的CSS选择中使用>，但这似乎也不起作用。

Answer 1

您应该使用.find()来针对.list。;)

​

$(function() {
  $(".layer-1").click(function(e) {
  
  console.log($(this).find(".list").children().length)
  
  	if (($(e.target).is(".link")) && ($(this).find(".list").children().length == 0)) {
        console.log("following link!");
      } else {
        e.preventDefault();
        console.log("Event prevented.");
      }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">Don't follow</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
          <li>list item</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="layer-1">
  <div class="layer-2">
    <a href="jsfiddle.net" class="link">follow!</a>
    <div class="layer-3">
      <div class="layer-4">
        <ul class="list">
        </ul>
      </div>
    </div>
  </div>
</div>

​

Answer 2

在$(this, ".list")中，参数是向后的。应该是$(".list", this)。第一个参数是要搜索的内容，第二个可选参数是要搜索的容器(默认情况下不是文档)。

这相当于$(this).find(".list")。

Answer 3

$(this).find(".list")应该能做到

您刚刚在$(这个，".list")的排序错误。