Return element values without a certain class

Question

I have a list of images, and I need to return a value of these images to then assign some commands. The problem is that in some <li> there will be a class called off and needs to be "discarded" from the order.

Code exemplifying:

<ul>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li>
        <img src="image1.jpg" class="imgx" />
    </li>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li>
        <img src="image1.jpg" class="imgx" />
    </li>
</ul>

I mean, I need to list the <img> that are not inside the <li class="off">.

I tried something like:

var teste = $('li:not(:has(.off)) > img.imgx').eq(1).attr('src');

But it seems you’re not "excluding" the classy ones off.

Answer 1

I used the dial li:not(.off) > img.imgx that selects all elements with class imgx whose father is a li who doesn’t have the class off.

The problem you had is due to the accumulation of two pseudo-selectors, which is not necessary in this case.

In the example below, to illustrate, I add a class selecionad to highlight the result of the selector.

$('li:not(.off) > img.imgx').addClass('selecionado');

.selecionado {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li>
        <img src="image1.jpg" class="imgx" />
    </li>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li class="off">
        <img src="image1.jpg" class="imgx" />
    </li>
    <li>
        <img src="image1.jpg" class="imgx" />
    </li>
</ul>