Question

我一直在尝试使用Flexslider v2更改某些内容以满足我的需求。我一直在尝试使用jQuery来定位li的父img class="active"，因为我想给它一类selected，但我还不是很成功

<ol class="foo">
  <li>
    <img src="bar.png" class="active">  <-- This class changes img elements depending on the active slide
  </li>
  <li>
    <img src="bar.png">
  </li>
  <li>
    <img src="bar.png">
  </li>
</ol>

我想出了类似的东西：

$(document).ready(function() {
   $('.foo li').children().each(function(index, value) {
     if($(value).hasClass('active')) {
         $(this).parent('li').addClass('selected');
     } else {
         $(this).parent('li').removeClass('selected');
     }
  });
});

它可以在控制台中运行，但它在我的main.js文件中没有任何作用。

Answer 1

的 LIVE DEMO

简单就像一行：

$('.foo li').find('img.active').closest('li').addClass('selected');

或者如果你真的需要它：

的 LIVE DEMO

$('.foo li').find('img').each(function(index, el) { if($(el).hasClass('active')) { $(el).closest('li').addClass('selected'); } else { $(el).closest('li').removeClass('selected'); } });

的 jQuery API Documentation - Closest

Answer 2

在我的main.js中将它包装成document.ready然后它应该按预期工作。你可以在控制台中使用它，因为在你编写脚本时会加载所有元素。

$(function(){
    $('.foo li').children().each(function(index, value) {
      if($(value).hasClass('active')) {
          $(this).parent('li').addClass('selected');
      } else {
         $(this).parent('li').removeClass('selected');
      }
  });
});

Answer 3

使用nearest（）：

$(this).closest('li'),addClass('selected');

Answer 4

添加$(document).ready(function(){

$(document).ready(function(){
$('.foo li').children().each(function(index, value) {
    if($(value).hasClass('active')) {
        $(this).parent('li').addClass('selected');
    } else {
        $(this).parent('li').removeClass('selected');
    }
});
    });

检查similar question HERE

Answer 5

$('.foo > li').removeClass('selected').each(function() {
    if($(this).find('img').hasClass('active')) {
        $(this).addClass('selected');
    }
});

Answer 6

为什么要使用.each()？当我们没有它就能实现我们的目标。

$(".foo li img.active").parent().addClass("selected");

选择子级的父级（如果有）

6 个答案: