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>

基本前提是，我要检查click事件的目标是否是链接，并利用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") 应该可以解决问题

对于$（this，“ .list”），您使用的参数顺序不正确

e.preventdefault（）基于嵌套的div和lis

3 个答案: