Question

我的HTML代码是：

<li>
   <a href="san-pham/thoi-trang-nam">Thời trang nam <span class="category-widget-btn"></span></a>
   <ul style="display: block;">
      <li><a href="san-pham/ao-nam" class="cat_lv2">Áo nam</a></li>
      <li><a href="san-pham/ao-khoac" class="cat_lv2">Áo khoác</a></li>
      <li><a href="san-pham/quan-nam" class="cat_lv2">Quần nam</a></li>
      <li><a href="san-pham/giay-dep-nam" class="cat_lv2">Giày dép nam</a></li>
      <li><a href="san-pham/ao-vest-plazer" class="cat_lv2">Áo vest, plazer</a></li>
      <li><a href="san-pham/do-lot-va-ngu" class="cat_lv2">Đồ lót và ngủ</a></li>
      <li><a href="san-pham/do-the-thao" class="cat_lv2">Đồ thể thao</a></li>
      <li><a href="san-pham/phu-kien" class="cat_lv2">Phụ kiện</a></li>
   </ul>
</li>

和我的jQuery尝试将class="open"添加到第一个<li>代码：

$('.cat_lv2').click(function () {
    $(this).parents().eq(3).addClass('open');
});

点击其中一个class="cat_lv2"链接时，我看不到任何变化。

所以，我用代码测试了它：

$('.cat_lv2').click(function () {
       if( $(this).parents().eq(3).addClass('open')) {
           alert('ok');
       }
    });

我收到一个弹出窗口，上面写着＆＃34; ok＆＃34;。

为什么我的代码无法使用？

Answer 1

你的父母太多了。您想要.eq(2)，而不是.eq(3)。

$('.cat_lv2').click(function () {
    $(this).parents().eq(2).addClass('open');
});

.eq()是0索引的，因此您需要使用2来获取第3个元素。

Answer 2

我相信你可能误解了jQuery中的.parents()函数是如何工作的。

$('.cat_lv2')函数返回它所作用的DOM对象的祖先列表。看起来您认为它获取了HTML文档中出现在它之前的所有DOM对象（HTML标记）的列表。

因此，在您的代码中，<li>是<ul style="display: block;">标记内的那群<ul>标记。所以他们的父母就是<li>和那个外在的无类<a>标签。 <span>标记和<li class="cat_lv2">标记都不是该<a>个标记集的祖先。 <ul>是$('.cat_lv2').click(function () { $(this).parents().eq(1).addClass('open'); });的兄弟。

因此，您的功能应为：

<li>

将“open”类添加到外部if。

正如@RocketHazmat在评论中提到的那样，你的测试中的true是无用的，因为jQuery总是返回一个等于.eq(3)的值。 As per the documentation：

如果在指定的从零开始的索引处找不到元素，则 method使用空集和长度构造一个新的jQuery对象属性为0。

所以.addClass("open")返回一个空列表，而不是null，static ConcurrentDictionary<string, Lazy<Action<object, object>>> CachedProperties = new ConcurrentDictionary<string, Lazy<Action<object, object>>>(); static void SetProperty(object obj, string name, object value) { if(obj==null) throw new ArgumentNullException("obj"); Type objType = obj.GetType(); string key = objType.FullName + ":" + name; Action<object, object> f = CachedProperties.GetOrAdd(key, k => new Lazy<Action<object,object>>(() => { PropertyInfo prop = objType.GetProperty(name); if(prop==null){ return (s,v) => {}; } ParameterExpression pobj = Expression.Parameter(typeof(object)); ParameterExpression pval = Expression.Parameter(typeof(object)); Expression left = Expression.Property( Expression.TypeAs( pobj, objType), prop); Expression right = Expression.Convert(pval, prop.PropertyType); return Expression .Lambda<Action<object, object>>( Expression.Assign(left,right), pobj, pval).Compile(); })).Value; f(obj,value); }返回一个对象，如@RocketHazmat所说，表示没有任何操作。

Answer 3

如果您想更改包含已点击的li标记的a，您只需要获取第一个父级：

＆＃13;

  $('.cat_lv2').click(function () {
    $(this).parent().addClass('open');
  });

＆＃13;

.open {
    background: red;
    text-shadow: 0px 0px 3px white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
   <a href="#">Thời trang nam <span class="category-widget-btn"></span></a>
   <ul style="display: block;">
      <li><a href="#" class="cat_lv2">Áo nam</a></li>
      <li><a href="#" class="cat_lv2">Áo khoác</a></li>
      <li><a href="#" class="cat_lv2">Quần nam</a></li>
      <li><a href="#" class="cat_lv2">Giày dép nam</a></li>
      <li><a href="#" class="cat_lv2">Áo vest, plazer</a></li>
      <li><a href="#" class="cat_lv2">Đồ lót và ngủ</a></li>
      <li><a href="#" class="cat_lv2">Đồ thể thao</a></li>
      <li><a href="#" class="cat_lv2">Phụ kiện</a></li>
   </ul>
</li>

＆＃13;

但是，如果您想要更改第一个li代码，无论点击哪个a，您都可以遍历ul代码并找到第一个孩子：

＆＃13;

$('.cat_lv2').click(function () {
      var ul= $(this).parent().parent();
      ul.find(">:first-child").addClass('open');
    });

＆＃13;

.open {
    background: red;
    text-shadow: 0px 0px 3px white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
   <a href="#">Thời trang nam <span class="category-widget-btn"></span></a>
   <ul style="display: block;">
      <li><a href="#" class="cat_lv2">Áo nam</a></li>
      <li><a href="#" class="cat_lv2">Áo khoác</a></li>
      <li><a href="#" class="cat_lv2">Quần nam</a></li>
      <li><a href="#" class="cat_lv2">Giày dép nam</a></li>
      <li><a href="#" class="cat_lv2">Áo vest, plazer</a></li>
      <li><a href="#" class="cat_lv2">Đồ lót và ngủ</a></li>
      <li><a href="#" class="cat_lv2">Đồ thể thao</a></li>
      <li><a href="#" class="cat_lv2">Phụ kiện</a></li>
   </ul>
</li>

＆＃13;

或

只需给第一个项目ID，因为你总是只改变一件事。

＆＃13;
＆＃13;
$('.cat_lv2').click(function () { $("#firstItem").addClass('open'); });
＆＃13;
.open { background: red; text-shadow: 0px 0px 3px white; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <li> <a href="#">Thời trang nam <span class="category-widget-btn"></span></a> <ul style="display: block;"> <li id="firstItem"><a href="#" class="cat_lv2">Áo nam</a></li> <li><a href="#" class="cat_lv2">Áo khoác</a></li> <li><a href="#" class="cat_lv2">Quần nam</a></li> <li><a href="#" class="cat_lv2">Giày dép nam</a></li> <li><a href="#" class="cat_lv2">Áo vest, plazer</a></li> <li><a href="#" class="cat_lv2">Đồ lót và ngủ</a></li> <li><a href="#" class="cat_lv2">Đồ thể thao</a></li> <li><a href="#" class="cat_lv2">Phụ kiện</a></li> </ul> </li>
＆＃13;
＆＃13;
＆＃13;

我不能添加一个类来标记，虽然它说好吗？

3 个答案: