Hello Readers.
This article is about how you can find any element within an element. For example, if you want to find any element or search a child element with a particular id or class using jQuery to know whether it exists or not, user the following method. Be sure, its very very easy. So let’s have a look on the code.

To search a child elements there are many methods available in jQuery, but in this case what I found the most suitable is this method which worked best for me. I have also used other methods like find() etc. those can also be used to find the child element as well but if we use find() , we need to be aware of the exact position of the div or element.  Sometimes it does not provide the required results like in the case below that is why i have used has() function. has() function tells whether the div or elements has the element we are finding or not. So both methods are good however usefulness depends on the requirements.

First i am creating html in which i am taking card div by bootstrap and putting two different buttons in it. One is  in inside the div.card-body (div which has class=”card-body”). Therefore, saying elements anywhere inside that class are inside card body and others outside that class are termed as outside card body.

<div class="card text-center" style="margin: auto;">
    <div class="card-header">
        <b>Card heading: Above card body</b>
    </div>
    <div class="card-body" style="background: #d8d8d8">
        <h4 class="card-title">This is card Title: in card body section</h4>
        <p class="card-text">Click the blue buttons whether they are found inside the card body or outside it.</p>
        <a class="btn btn-info find-one">Cick to see Where i am</a>
    </div>
    <div class="card-footer text-muted">
        <div><small>This is card footer: after card body section</small></div>
        <a class="btn btn-primary find-one">Cick to see Where i am?</a>
    </div>
</div>

Now we have Two buttons with class=”find-one”, by clicking on them we can find whether the button is inside div or outside it.

<script>
    $(document).ready(function () {
        $(".find-one").click(function (event) {
            var target = $(event.target);
            var target_found = $('.card-body').has(target).length;
            
            if(target_found){
                $('.result').text('I am Inside the Card body');
            }else{
                $('.result').text('I am outside the Card body');
            }
            $('.result').show();
            setTimeout(function (){
                $('.result').html('');
                $('.result').hide();
            }, 5000);
        });
    });
</script>

The result test describing whether the element is inside div or not is taken in a separate heading tag having class=”result’.

<div class="result col-md-12 col-sm-12 col-xs-12 text-center" style="color: #156507;padding: 5px; background: #dbff87;display: none;margin-top: 0.5em; font-size:1.5em"></div>

The complete code to search a child element in a div by jQuery is:

<div class="row">
    <div class="card text-center" style="margin: auto;">
        <div class="card-header">
            <b>Card heading: Above card body</b>
        </div>
        <div class="card-body" style="background: #d8d8d8">
            <h4 class="card-title">This is card Title: in card body section</h4>
            <p class="card-text">Click the blue buttons whether they are found inside the card body or outside it.</p>
            <a class="btn btn-info find-one">Cick to see Where i am</a>
        </div>
        <div class="card-footer text-muted">
            <div><small>This is card footer: after card body section</small></div>
            <a class="btn btn-primary find-one">Cick to see Where i am?</a>
        </div>
    </div>
    <div class="result col-md-12 col-sm-12 col-xs-12 text-center" style="color: #156507;padding: 5px; background: #dbff87;display: none;margin-top: 0.5em; font-size: 1.5em;"></div>
</div>
<script>
    $(document).ready(function () {
        $(".find-one").click(function (event) {
            var target = $(event.target);
            var target_found = $('.card-body').has(target).length;
            
            if(target_found){
                $('.result').text('I am Inside the Card body');
            }else{
                $('.result').text('I am outside the Card body');
            }
            $('.result').show();
            setTimeout(function (){
                $('.result').html('');
                $('.result').hide();
            }, 5000);
        });
    });
</script>

You can download this code here

Download