Applying class to a different div based on the presence of a specific ID in jQuery

I'm currently working on implementing a jQuery conditional to add a class to a specific element when another element contains a certain ID. Below is the code I have created so far:

<script type="text/javascript">
$(document).ready(function() {
if( $('.container-fluid').hasId('europe') === true ) 
{
 $('controlBar_playerVideo1').addClass('darkcontrols');
}
});
</script>

You can view the live site here:

After adding the script to the footer, I encountered an "undefined is not a function" error in the console. It's worth noting that my knowledge of jQuery is very limited.

I would greatly appreciate any guidance or tips on how to achieve this functionality.

jquerycssconditional-statements

Answer №1

give this a shot

<script type="text/javascript">
$(document).ready(function() {
if ($('.container-fluid').attr("id") == "europe") {
         $('controlBar_playerVideo1').addClass('darkcontrols');
  }
 });
    </script>

Answer №2

The issue arises because hasId() is not a jQuery function. To retrieve the id of the element, you can utilize either is() or attr('id').

if($('.container-fluid').is('#europe')) 
{
    $('controlBar_playerVideo1').addClass('darkcontrols');
}

OR

if($('.container-fluid').attr('id') == 'europe') 
{
    $('controlBar_playerVideo1').addClass('darkcontrols');
}

Answer №3

To determine if there are elements with the id of europe and CSS class of container-fluid, you can use the following code: 

$('#europe.container-fluid').size() > 0

Answer №4

To implement conditional toggling of a class, you can use the function toggleClass() in jQuery by providing a boolean switch. If the switch evaluates to true, the specified class will be added; otherwise, it will be removed or not added at all:

$('controlBar_playerVideo1'). toggleClass('darkcontrols',  $('#europe.container-fluid').length);

For more information, you can check out the following resources:

Answer №5

Just wanted to share my successful implementation of Ali's solution. I encountered a small issue where the script wasn't applying a class to my element, possibly because it already had a class assigned. However, once I changed the target element from #controlBar_playerVideo1 to html, the 'darkcontrols' class was successfully applied.

Here is the final script that worked for me:

<script type="text/javascript">
    jQuery(document).ready(function() {
        if (jQuery('.container-fluid').attr("id") == "europe") {
        jQuery('html').addClass('darkcontrols');
    }
    });
</script>

Big thanks to Ali and all contributors for their assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to effectively copy a sibling element to another sibling element within multiple parent elements concurrently using jQuery?

I have several guardians, more than two, as an illustration, and I wish to replicate all the base prices onto all the individual prices with just one click. <button type="button" id="copybtn" class="btn">Copy</button> <p class="baseownwr ...

jquery

Choose Select2 to remove all selected options

I'm looking for a way to remove all selected values in one click without having to specify each individual 'id' separately. I've tried experimenting with different approaches, but so far, I've only been able to deselect the first ...

javascriptjqueryhtmlselectionjquery-select2

Issues with Jquery Ajax not correctly obtaining PHP response

In my project, I have a PHP script sending a JSON response to jQuery: foreach ( $obj as $o ) { $a[ $o->key] = utf8_encode($o->id); } die(json_encode($a)); Here's the HTML/jQuery code that is supposed to handle the response: $.ajax({ t ...

phpjqueryajaxjson

What is the best way to separate two <a> tags using only Bootstrap?

Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page. My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is ther ...

htmlcsstwitter-bootstrap-3bootstrap-4

The 'Bfrip' button is missing from the DOM

Having some issues with displaying table content using DataTables. Everything seems to be working smoothly except for the Buttons, which are not appearing as expected. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.1 ...

javascriptphpjquerycssdatatables

Tips for building a material design input form with CSS and Bootstrap

I am working on creating a material design input form using CSS and Bootstrap. The current code I have is not providing the exact result I desire. If you want to view the source code, check out this Code Pen Link Here is the HTML CODE that I am using: & ...

javascripthtmlcssbootstrap-4material-design

Looking to develop a swipeable card feature similar to Gmail using React JS (excluding React Native)?

Looking to replicate the swipe card functionality of Gmail in React Js, After creating the UI and implementing swiping using UseGeature, I am facing an issue with smooth animation when hiding or showing buttons using UseEffect. There is a 20px movement be ...

javascriptcssreactjs

Using CSS3 to Display Box-Shadow Behind Adjacent Div Element

I have implemented the following: box-shadow: 0px -1px 0px #333333; However, on my footer, it seems to be obscured or disappearing when there is another div preceding it. It's a bit difficult to explain, but you can see what I mean in this screensho ...

css

Tips for directing the scroll according to the current selection class

I am attempting to focus the scroll based on the selected class when clicking on the previous and next buttons. How can I achieve this functionality? Please review my code on https://jsfiddle.net/kannankds/bcszkqLu/ <ul class="kds"> <li>tile ...

javascriptjqueryhtmlcss

JSON - Select2 Data Structure

Looking for guidance on manipulating JSON values. {"items":[ {"id":1,"parent_id":0,"name":"Root Catalog"}, {"id":2,"parent_id":1,"name":"Category1"}, ...

javascriptjqueryjsonjquery-select2

Utilize a single button in jQuery to modify several rows simultaneously

Is there a way to edit multiple rows using just one button with jquery? I am currently facing an issue where only the value of a single row is editable when I click on the edit button due to the use of row span. Below is the code snippet: $('.editb ...

jqueryhtmlbootstrap-4

Widgets that opt for an <h3> for their title instead of the usual <h2>

(personal website) In my current theme, the widgets are displayed below the slider. For example, Rainy Day Promotion, Raves, etc. I would like all the titles to be shown as <h3> tags instead of <h2>. If anyone can provide me with guidance on ...

phphtmlcss

Enhancing the Bootstrap carousel slider with offset background content container

Apologies if the title seems a bit unclear. I want to clarify that I am working with the latest version of pure Bootstrap (https://getbootstrap.com/) and nothing more. My goal is to replicate the layout shown in the following image for a client: https:// ...

htmlcsssliderbootstrap-4

How can I prevent clicks on child links using the :not() selector?

I am working on a script using JQuery where I want to add a click handler to a div while ignoring clicks on the children a tags within it. You can check out my attempt (which is not working as expected) on this JSFiddle link: http://jsfiddle.net/q15s25Lx/ ...

javascriptjquery

Is there a way to verify the location of an element?

Currently, I am attempting to monitor the position of the 'car'. When the car reaches a top offset of 200px, I would like to apply a specific property to the 'phone' element. The concept is that as you scroll down, the car will move, an ...

javascriptjqueryreactjsperformancecss

What is the best way to shut down a browser using C#?

After clicking the Login button, I want to automatically close the browser if the login is successful. protected void btnLogin_Click(object sender, AuthenticateEventArgs e) { if (isAuthenticated) { // close the browser } } Since I am not using AJAX, thi ...

c#javascriptjqueryasp.net

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

javascriptjquerycss

Modify the drop-down value based on the selection of a checkbox in HTML

Here is the updated version that I am stuck with. <base href="http://skins4device.com"/> <link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

jqueryhtml

Center elements at % on the webpage using CSS styling

When creating two bars at 70% and 100%, I also want a small triangular shape to point specifically at the 70% mark. Here is how I am currently drawing the triangle: .arrowUp { width: 0; height: 0; border-left: 10px solid transparent; border-right ...

csssass

Retrieve the identification number from the specific row chosen in the table

Having some issues with retrieving the correct ID from the selected table row in Datatable. The alert I'm using to check the output of the JS script always shows the same ID, regardless of how many rows are in the table list. Each row has a different ...

phpjqueryjsonajaxhtml