CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dhaval Verma
Dhaval Verma

Reputation: 51

Highlight an element in an active DIV

I want to highlight a span(class="tiny") element, when its div is active or clicked on any of its element...

I have already tried to highlight that element but no success....only was able to highlight the whole div....

$('.main-class').on('click', '.row-fluid', function() {
    $(this).parent().find('.tiny').css('background-color', '');
    $(this).css('background-color', '#00fff0');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Want to highlight Only the....span class="tiny".. values when any of the element in class="panel-body" is activate.

Upvotes: 0

Views: 115

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074258

I would use CSS:

  1. Add a class for highlighting
  2. On click, remove that class from any element that has it and add it to the element for the click

Apparently (from the comments), although your code is calling css directly on $(this), you want to find the .tiny, so I've updated to do that as well.

If for some reason you can't add CSS (an early version of your question said you couldn't), you can add the style element using JavaScript.

Example:

$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});
.highlight {
  background-color: #00fff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Example adding the style element with code:

$("<style>")
.text(".highlight { background-color: #00fff0; }")
.appendTo(document.head);
$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

CMartins
CMartins

Reputation: 3293

 $('.main-class').on('click', '.row-fluid', function() {
            $(this).parent().find('.tiny').css('background-color', '');
            $(this).parent().find('.tiny').css('background-color', '#00fff0');
 });

Upvotes: 1

Related Questions