如何选择具有特定类jQuery的特定div？

Question

I have a circle, when I clicked on it 2 options showed up.

<div class="col-sm-2" style="display: block;">
    <span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">
    </span>
    <div class="line" style="display: none;"></div>
    <div class="options" style="display: block;">

        <input type="text" class="search" name="">
        <i class="fa fa-plus float-right"></i>

                        <p class="option" id="Dualstack-Pvt">
            Dualstack-Pvt
            <i class="fa fa-info-circle float-right"></i>
        </p>
                        <p class="option" id="Dualstack-Pvt-2">
            Dualstack-Pvt-2
            <i class="fa fa-info-circle float-right"></i>
        </p>
                    </div>
    <div class="selected" style="display: none;"></div>
</div>

I want to do something when one of the option clicked.

I can't seem to select it.

This is what I have now.

$('.' + selector).on("click", function() {

    if (steps.indexOf(selector) != -1) {
        nextStep = steps[steps.indexOf(selector) + 1];
    }

    let self = $(this);

    $('div.options').fadeOut('fast');

    self.animate({
        backgroundColor: fadeColor
    }, 1400);
    self.next().next('.options').slideDown(1000);

    console.log(self)


    self.find('.options').find('option').one("click", function(event) {

        console.log('%c -------->> HERE <<--------', "color: green;");


    });

});

This is my selection

self.find('.options').find('option').one("click", function(event) {

I thought find() will find the matching class ... No ?

Please help me understand why this is not working ...

Answer 1

In the query you have here:

self.find('.options').find('option')

The section self.find('.options') will look for elements that are the class option that are the children of self . In this case since self is a <span> with no children so the selector will not work. Note you are already doing this when you used self.next().next('.options') . Next the .find('option') part will look for the tag <option> and not the class option , so change this to .option . With those fixes you will have:

self.siblings('.options').find('.option').one("click", function(event) {

    console.log('%c -------->> HERE <<--------', "color: green;");

});

Snippet example

 $('.fa-mobile').on("click", function() { let self = $(this); $('div.options').fadeOut('fast'); self.next().next('.options').slideDown(1000); self.siblings('.options').find('.option').one("click", function(event) { console.log('%c -------->> HERE <<--------', "color: green;"); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-2" style="display: block;"> <span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">Circle </span> <div class="line" style="display: none;"></div> <div class="options" style="display: block;"> <input type="text" class="search" name=""> <i class="fa fa-plus float-right"></i> <p class="option" id="Dualstack-Pvt"> Dualstack-Pvt <i class="fa fa-info-circle float-right"></i> </p> <p class="option" id="Dualstack-Pvt-2"> Dualstack-Pvt-2 <i class="fa fa-info-circle float-right"></i> </p> </div> <div class="selected" style="display: none;"></div> </div>