Navigate through the parent elements and show the text if the child element is not present

I'm currently exploring how to iterate through all parent classes (.grid) and if there is no child div with the class (.image-container), then to display the (.content-container) within the same (.grid) section.

HTML:

<style>
.grid .content-container {
    display:none;
}
</style>

<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art"></div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art"></div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
jqueryhtmlcss

Answer №1

This solution should do the trick:

$('.block').each(function() {
    if($(this).find('.photo-box').length == 0) {
        // no photos
        $(this).find('.description-box').show();
    }
});

Answer №2

Here is an alternative solution with just one function:

$('.grid')
    .filter(function checkForImages(){return !$('.image-container', this).length})
    .children('.content-container')
    .show();

Check it out here.

Alternatively, you can use this code:

$('.grid')
    .filter(':not(:has(.image-container))')
    .children('.content-container')
    .show();

View the code in action.

Another option is to use the following code:

$('.grid:not(:has(.image-container)) .content-container').show();

See it in action here.

It's not entirely clear which option is the most efficient, but my instinct tells me the first one might be.

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

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

Despite previously asking questions about loading XML into a JS variable, I haven't found a satisfactory solution. In my script, I declare a variable before making an ajax request and then assign the result to that variable. However, this only seems t ...

javascriptjqueryxml

Deciphering the method to retain added text

Imagine you have this code snippet: $('.button').click(function() { $('body').append("<p>Random Text</p>"); }); Whenever the .button is clicked, text is added to the body. How can we make sure that this text is saved a ...

javascriptjqueryparse-platform

Guide on storing images in a designated folder using CodeIgniter

My code is located in view/admin_view2.php <?php echo form_open_multipart('home_admin/createBerita'); ?> <div class="form-group" > <label class="control-label">upload foto</label> <inpu ...

javascriptphphtmlcsscodeigniter

Incorporating SQLSRV results into clickable <td> elements: A dynamic approach

As a newcomer to the world of JS/PHP/web development, I'm seeking help with a seemingly simple task. My goal is to make each <td> element in a table clickable, and retrieve the text contained within the clicked <td>. Currently, I have a S ...

javascriptphphtmljquerysqlsrv

Tips for adjusting background-image position after page scale increase

I have a div block with the specified styles: .promo-blocks .first-appointment { background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz"); position: relative; background-c ...

htmlcss

Bootstrap-Select does not function properly when new rows or content are added dynamically

I have a table row with multiple select boxes for form input. When I clone that row to create a new one, the dynamically added rows encounter an issue with the select picker drop down functionality. After changing the value in the second or subsequent sel ...

jquerybootstrap-select

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

development response in jQuery

As a newcomer to jQuery, I am trying to understand the distinction between response and response.d. Currently, I am utilizing response.d for failure alerts. I am curious to know what message would be displayed in the alert box if there is a failure (alert ...

jquery

Preventing Page Content Overflow in Semantic-ui SideNav

I am currently working on a webpage that includes a side navigation bar. I recently started using semantic-ui and its grid system, but I'm facing an issue where the content of the page flows under the side nav and gets hidden. I have tried various sol ...

javascripthtmlcsssemantic-ui

How to access an element inside a div using the eq() method

Within my #img_wrapper, I have multiple pictures each enclosed in a link: <div id="img_wrapper"> <a href="img1.jpg" style="display: none;"> <img src="img1.jpg" /> </a> <a href="img2.jpg" style="display: none;"> &l ...

jqueryhtml

Eliminate border around image

I've been trying to get rid of the image border using different methods img { border: 0px; } I even attempted to remove it from the browser console with this code border: none !important This is what my html code looks like <div id="startD ...

htmlcss

Insert JavaScript code into the head of the document (including the complete script code)

I am looking to insert a script in the head section of a website so that the target HTML appears as follows: <head><script type="text/javascript">*some code...*</script></head>. This particular script works perfectly: var head = d ...

javascripthtmlwebheader

Content hidden by spoiler buttons may overlap with other spoiler buttons

I've created some spoilers that reveal information when clicked on. When I clicked on spoiler1, the content slid underneath the other spoilers strangely. Here's an example of what happened: http://gyazo.com/4571423534e2442dc960d119c668dfa8 Why ...

jquerycssposition

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

javascripthtmlcssvue.jscalculator

Style selector for dynamic drop-down menus

import React, { Component } from "react"; export default class FontChanger extends Component{ constructor(props){ super(props); this.state ={ selectedFont: "", currentFont: "", }; this.handleFon ...

javascripthtmlcssinline

Ways to delete a CSS attribute with jquery

Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...

javascriptjqueryhtmlcss

What are some effective strategies for working with arrays and forms in PHP and JQuery?

In my MySQL database table, each row has a unique ID identifier: id text cat 4 abc 1 233 bbb 2 45 efa 1 With PHP, I generate an HTML table displaying the TEXT and CAT fields. The table rows are creat ...

phpjqueryformswhile-loop

Unleash the power of drag-and-drop functionality with cdkDrop

I am currently tackling a project that requires the implementation of a drop zone functionality where elements can be dragged from a list and dropped in a zone for free movement. I intend to utilize a cdkDropList for the zone due to its comprehensive list ...

javascripthtmlangulartypescriptdrag-and-drop

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...

javascripthtmlcss