Why isn't it working? Looking for a script that adds a class when the element is empty?

I have a script that should add the class "leftmax" to the li element with id "spect" when the div element with id "tab2" is empty, but it doesn't seem to be working.

Can someone provide some assistance?

<script type="text/javascript">
$(function(){
if($("div#tab2").html() != "")
{
$("li#spect").addClass("leftmax");
} 
});
</script>



<div class="content_container">

<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li id="spect"><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content"><h2>title<h2></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"><h2>title<h2></div>
</div>

</div>

Answer №1

It seems like the intention is to only add the class when div#tab2 is empty. In that case, there was a logic error in the comparison operator. Here's a revised solution:

<script type="text/javascript">
$(function() {
    if ($("div#tab2").html() == "") {
        $("li#spect").addClass("leftmax");
    } 
});
</script>

Answer №2

In order to check for "not empty", you can use the following code snippet:

if($("section#panelB").html() !== "")

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

If the width of the window is below 768px, do not execute the function

In order to prevent the showCover() function from firing when the window width is less than 768px on page load AND resize, I have made some adjustments to the code below. Even though the window is smaller than 768px, the function will not be triggered. ...

What error is present in this postal code?

$.post( "login.php", { user: id, pass: ps, action: 'd56b699830e77ba53855679cb1d252da" }, function(data){ var status = ($.evalJSON(data).oc); showMessage($.evalJSON(data).title,$.evalJSON(data).msg,status); if(st ...

Deactivate the other RadioButtons within an Asp.net RadioButtonList when one of them is chosen

Is there a way to disable other asp.net radio buttons when one of them is selected? I have three radio buttons, and I want to disable the other two when one is selected. After doing some research, I managed to disable the other two when the third one is se ...

Are jQuery Accordion and Magento causing issues: Potential clash?

I am currently utilizing the jQuerytools accordion/tab feature within a Magento platform, however I am encountering issues with the script not functioning properly. If you take a look at the functional page linked below, you will see that the content and ...

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

How to retrieve the row index from a table using JavaScript

This question has cropped up numerous times, and despite trying various solutions suggested before, none of them seem to be effective in my case. Within a modal, I have a table where users can make changes that are then used to update the database. The ta ...

An error occurs when using e.slice function

I am facing an issue with my kendoDropDownList that uses kendo UI and jQuery. I cannot figure out why this error is occurring. $("#drpState").kendoDropDownList({ optionLabel: "States...", delay: 10, ...

Turn off and then turn on user input without exiting the textarea

I've been working on a small project that requires me to enable and disable text input in a textarea using key commands, similar to Vi/Vim's insertion and command modes. However, I'm struggling to find an elegant solution. Disabling the tex ...

How can one gain access to a specifically generated element?

In my task of dynamically generating multiple elements, I am facing an issue related to accessing specific ones. To illustrate this problem as simply as possible, I have provided the following code: $(document).ready(function() { var num1 = 0; v ...

Positioning borders in an Outlook table

While experimenting with Mjml, I encountered an issue where I struggled to place the border exactly where it needed to be in order for my table to function correctly. It was a bit of a do-it-yourself solution, but it was the only way I managed to make it w ...

Looking to display a visualization using data from a MongoDB database

I am seeking advice on the most effective way to achieve the following goal. I have been storing user activity data in MongoDB as a log, with entries similar to: { "date":"01-01-2002T08:20:30", "task":"contact-lead", "user":"username" } My objective ...

Is there a way to determine the height of an image on Flickr using jQuery without actually loading the image file?

I am currently working on a project using jQuery to load images from a Flickr RSS-feed. I am facing an issue with the default image size obtained from the feed - I want the loaded images to be at least as tall as the wrapper element they are displayed in ( ...

What are the reasons for utilizing various approaches when transmitting data to a server using jquery ajax?

I've been tasked with updating an old project and noticed that the data being sent to the server via jQuery's ajax method is formatted differently from how it's done in newer projects. In the old project, the data is passed as a JSON object ...

What is the best way to set a parent element's width to be the same as one of

Is it possible to make the width of div.main match that of table.tbl2? In this scenario, I want inline4 to be on the second line and for the width of div.main to be identical to the width of table.tbl2. .container { text-align: center; } .main { di ...

Achieving overflow behavior in a div with maximum height that contains another div with maximum height (Overflow issue persists)

Currently, I am utilizing Materializecss to showcase a modal window. Within this modal, there is a div Content that showcases items using ng-repeat. However, the issue arises when the content fills up and the css rule for my content-div fails to take effec ...

What is causing the newly generated input tags to disappear from the page?

I'm having an issue where my code successfully creates new input tags based on user input, but they disappear shortly after being generated. What could be causing this to happen? <form> <input type='text' id='input' /> ...

Trouble with CSS in a WordPress theme utilizing a two-column layout

After setting up my wordpress blog (http://raptor.hk), I encountered an issue with aligning the right sidebar correctly. It seems like I have overlooked something in the CSS code. The div responsible for the sidebar has been assigned the name "rightbar". I ...

What is the best way to merge two JSON values with the help of jQuery?

Two JSON Objects are provided below: The first one is: [{ "id": 5001, "count": "0", "type": "None" }, { "id": 5002, "count": "0", "type": "Glazed" }, { "id": 5005, "count": "0", "type": "Sugar" }, { "id": 5003, ...

Executing a Shortcode Using a Button in Visual Composer for Wordpress

It should be easy to do this. I've got a great plugin with a modal newsletter signup form that offers various launch options, including manual launching with the following codes. https://i.stack.imgur.com/IGbsp.png My theme utilizes Visual Composer. ...