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

Question

I have been trying to change some things with the Flexslider v2 to fit my needs. I have been trying to use jQuery to target the parent li of the img class="active" because i want to give it a class of selected but I have not been very successful

<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>

I came up with something like this:

$(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');
     }
  });
});

and it works in the console, but it does nothing within my main.js file.

Answer 1

LIVE DEMO

Simple like one line:

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

Or if you really need it:

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

Wrap it i document.ready like this in your main.js and then it should work as expected. You got it worked in console because all elements are loaded when you runt the script.

$(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

Add $(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');
    }
});
    });

Check the similar question HERE

Answer 5

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

Answer 6

Why use .each() ? When we can achieve our goal without it.

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