Using jQuery how can I select a child when also using .closest()?

Question

I'm trying to select an element in my html, I'm able to select it using the following...

$(".card .card-title > div a span.paragraph-end").css({ background: "linear-gradient(to right,rgba(255,255,255,0)," + $(this).css("background-color") + "" });

I started with the above so I could see if it worked, now I'm trying to select just the instance on the page I want to change and not all of them. So I was able to select the .card I want to change using:

$(this).closest(".card")

But doing

$(this).closest(".card .card-title div a span.paragraph-end").css({ background: "linear-gradient(to right,rgba(255,255,255,0)," + $(this).css("background-color") + "" });` 

didn't work for me. How can I select a child class after using the closest method?

Answer 1

You need to find the paragraph-end element within the current card so use closest() to locate the card then use .find() to locate the paragraph-end element

$(this).closest(".card").find(".card-title div a span.paragraph-end").css({
    background: "linear-gradient(to right,rgba(255,255,255,0)," + $(this).css("background-color") + ""
});