jQuery: How to check if an element exists and change css property


Tags: javascript,jquery,css

Problem :

First of all, sorry if this is a simple question. I am new to jQuery and I want to know how can I check if an element exists and if it does, change the css property.

Here is what I mean: I have the following list:

<ul class="element-rendered">
    <li class="element-choice">Item A</li>
    <li class="select-inline">Item B</li>
</ul>

I want to know how can I check if the class select-inline exists inside element-rendered and if it does, how can I change the css background of element-choice to blue?

I created a fiddle to reproduce this example.

Again sorry if this is a simple question but I am new to jQuery.



Solution :

You can use .length to check if the element exists in DOM.

$('.element-rendered .select-inline') will select all the elements having class select-inline inside the element with class element-rendered. .length on selector will return the number of matched elements. So, number greater that one, means the element exists. Then you can use .css to set inline styles.

Demo

if ($('.element-rendered .select-inline').length) {
  $('.element-choice').css('background', 'blue');
}
.element-choice {
  width: 100%;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="element-rendered">
  <li class="element-choice">Item A</li>
  <li class="select-inline">Item B</li>
</ul>


I'll also recommend you to use class in CSS and add it to the element by using addClass.

Demo


    CSS Howto..

    How to stack an overlay over html5 video

    How to create a sliding navigation with either jquery or css? [closed]

    How to make an image fully flexible in terms of display size?

    How do I get these two columns to have the same height at all times - CSS?

    how to creating a separator line which is always in the middle (center)

    How to add a color in the
    bottom content area?

    How to apply css on checkbox when it's getting disabled?

    How to remove border for last column in css?

    How to fade text out vertically, similar to Amazon's product descriptions

    How to create a master page using HTML? [closed]

    How to override inline CSS without using !important or javascript?

    how can I apply css based on parent div class

    How to fade out and fade in the divs sequentially

    How to dynamically colour svg images in a webpage? [duplicate]

    How can I split a text in 2 color vertically?

    How to prevent the vertical scroll of this div?

    how to crop big image in bootstrap carousel

    Grunt + Sass, how do I include subfolder scss when I compile?

    How to center a component without knowing its width in Css

    How can I resize my iframe keeping the ratio?

    How to center image with full height and variable width

    CSS - How to remove white
    margins

    How to markup an obscure data table layout for screen readers?

    How do I make a row of 5 responsive using percentage widths?

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    How to create an absolutely positioned submenu which appears on css hover

    how to make jquery transition smoothly

    How to modify a div with another div with Css

    How to apply different CSS style to child elements as they occur inside one another?

    How to cancel CSS effect in Responsive Website Footer menu?