Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery":

<div class="xxxgallery"> (this is unique and gives me a point to select the children from)
    <h2></h2>
    <div class="cat slick-initialized slick-slider slick-dotted" role="toolbar">
          <div aria-live="polite" class="slick-list draggable">
               <div class="slick-track">
                     //more code
               </div>
          </div>
    </div>
</div>

The specific div I need to target has the class "slick-track." The challenge is that there are 8 similar galleries on the page, but only the top one with the class "xxxgallery" is unique. This means I cannot directly use $('.slick-track') because I need to set different widths for each of the 7 other galleries based on this unique selector.

Answer №1

If you are looking for a solution, consider utilizing the find() method

$(".gallery").find(".carousel-item")

Answer №2

If you are looking for a unique selector for the first div with the class "xxxgallery", you can use CSS or jQuery to achieve that:

div.xxxgallery div.slick-track

To be even more specific, you can go with:

div.xxxgallery > div.cat.slick-initialized.slick-slider.slick-dotted > div.slick-list.draggable > div.slick-track

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 AngularJS altering the DOM elements?

I'm still learning the ins and outs of AngularJS. While I've grasped data loading using AngularJS, I'm hitting a roadblock when it comes to implementing basic jQuery click events on the loaded items. Here's the code snippet in question: ...

Mastering the art of horizontal alignment for button and ul elements

I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...

Dynamic rule addition with JQuery Validation

I am searching for a method to dynamically incorporate the jQuery validation rules, as they are needed in various locations. For instance, a user can edit news in two different ways. The first method involves using a standard form with jQuery validation, ...

JavaScript sorting through nested functions

Having an issue with running a function inside another function for my Bingo game script. The checkBingo() function is defined outside of a .click() function, but I'm facing problems. Ajax is involved, so that might be contributing to the issue. Here& ...

Prevent the ability to reload and use the F5 key on my PHP page

Currently, I am utilizing a timer on my PHP page. However, whenever someone refreshes the page, the timer resets from the beginning. I am looking for a solution to disable the ability to refresh the page using F5 or reload options within my PHP page. Appr ...

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

Tips for embedding a PHP function within JavaScript code

I am working on enhancing an online application with a translation feature. The application comprises of a frontend coded in HTML and JS, and a backend developed using PHP that is linked to a database. Communication between the frontend and backend occurs ...

The Click Event is failing to trigger for a dynamically created ID within a span element

I am currently working on a Task Project. In this project, I have been adding items dynamically and generating items dynamically as well. However, when it comes to deleting items by clicking on a span element, the click event doesn't seem to work. I ...

Height of Parent Div minus Margin Top equal to 100%

I am working on a layout that requires three divs with different heights and header sizes to be positioned 100% from the top of their parent, while taking into account the height of the headers. I could use jQuery to achieve this, but since it's a res ...

Deactivate while maintaining menu options

Currently, I have a Vue.js form that manages adding and updating data for patients. The issue at hand involves a <select> tag which allows for the addition of a relative. This select field is populated by an array called PPrelations, which is sourced ...

Achieving vertical alignment in Bootstrap for card header

I'm troubleshooting a card layout on my Bootstrap page <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" cro ...

Populating Information on a Sideways Chronological Line

I am looking to develop a unique full-screen timeline web application that enables horizontal scrolling, displaying html-and-css-formatted text along with images, videos, and audio files. The timeline will begin at the present date on the right side, allo ...

How can I extract the "href" attribute from an anchor tag using XPath?

I am working with HTML code that looks like this: <a href="/images/big_1.jpg" class="class-a"> <img class="class-img" src="/images/small_1.jpg"/> <span class="class-span"> <img src="/images/img_1.png"> </ ...

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

Java applet: keep an eye on incoming HTTP requests

I'm currently working on developing a Java applet and I would like to establish a connection to a webpage. Afterwards, this webpage will undergo several GET requests towards an external server. Could someone provide details on how I can view the speci ...

Linking JSON Data to a Data Table

I have integrated DataTable into my project and I am working with a JSON data source stored in a variable called 'myJson'. This JSON data includes fields for first name, last name, and contact type, organized as follows: var myJson = "[ ...

Adding options to a dropdown menu dynamically while editing a form with the help of javascript

I have a dropdown like in below:- <form name="depositForm" action="<?php echo site_url('ajax_funds/deposit_funds'); ?>" id="depositForm" class="page-form-main form-horizontal " autocomplete="off" method="post"> <div class="form- ...

Saving user input from a PHP form into a text file

Below is a simple PHP form that performs a calculation when submitted. Now, I want to save the inputs (height, weight) and calculation result to a text file without displaying the path of the file. Ideally, I would like each submission to add a new line in ...

JS editing an array in a datatable

I have created an HTML page where users can enter data, which is then uploaded to a SQL server. I have been studying DataTables to load an array into a table and tried editing it, but still haven't had success. Can anyone offer assistance? var array ...