Manipulating div elements using jQuery selectors

How can I use jQuery to access the curr-dish and sub-dish classes within the third dish-wrapper div, when all three divs have the same class? I want to target only the third div without adding any IDs to the div elements. My code is provided below.

<span class="status">
      <div class="dish-wrapper">
        <ul class="dishations">
          <li class="curr-li">
            <div class="curr-div">
              <a class="curr-dish sub-dish" "></a>
            </div>
            <ul class="dish-ul">
          </li>
        </ul>
      </div>

      <div class="dish-wrapper">
        <ul class="dishations">
          <li class="curr-li">
            <div class="curr-div">
              <a class="curr-dish sub-dish" "></a>
            </div>
            <ul class="dish-ul">
          </li>
        </ul>
      </div>

      <div class="dish-wrapper">
        <ul class="dishations">
          <li class="curr-li">
            <div class="curr-div">
              <a class="curr-dish sub-dish" "></a>
            </div>
            <ul class="dish-ul">
          </li>
        </ul>
      </div>
</span>
javascriptjqueryhtmlcssjquery-ui

Answer №1

It is possible for you to

$('.food-container:eq(2) .current-food.sub-item')

Answer №2

If you want to retrieve an element at a specific position and combine classes, you can utilize the :eq selector along with dot notation .

$('.dish-wrapper:eq(2)').find(' curr-dish.sub-dish');

To target the last element, you have options like using :last or .last()

$('.dish-wrapper:last').find(' curr-dish.sub-dish');

Answer №3

When trying to access the third element, using :eq() is a recommended approach as mentioned by others. To retrieve the curr-div and curr-dish sub-dish separately, you can utilize the following code snippets:

$('.dish-wrapper:eq(2)').find('.curr-div');
$('.dish-wrapper:eq(2)').find('.sub-dish');

Alternatively, you can combine them like this:

$('.dish-wrapper:eq(2)').find('.sub-dish,.curr-div');

It's important to note that class names should not have spaces for easy accessibility in jQuery/JavaScript. For instance, having "curr-dish sub-dish" as a class name may hinder accurate searching, allowing only for the last part of the class name to be recognized.

Best of luck!

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

Link the html button with the php code in order to perform a specific action

I am looking to link my HTML code with PHP in order to achieve the following functionality: 1. Create a cookie that prevents a specific message from being displayed again when a certain button is clicked. 2. Hide messages using CSS after the button clic ...

phphtml

Buffering or queuing asynchronous input for predictive text suggestions

I have been developing a type-ahead input component, and one key aspect of my implementation is the utilization of a queue or buffer FIFO to manage cancelable promises. Given that typing can occur more rapidly than the async requests for each letter, I ne ...

javascriptreactjsasynchronouspromise

Manipulating a list in ReactJS without using a promise

I am facing a challenge with updating a list that is declared outside of a promise (API call). Below is the code snippet in question: let data = []; api.getData(this.state.ID).then((resp) => { data = [...data, { title : resp.title }]; data = ...

javascriptreactjsreact-nativepromise

The Bootstrap carousel indicators are not automatically switching because they are placed outside of the main div

I have integrated the latest Bootstrap framework into my website, featuring a visually appealing carousel. The unique aspect of my carousel design is that the indicators are positioned outside the main carousel div. Here is a snippet of my carousel code: ...

jqueryhtmlcsstwitter-bootstrapcarousel

Trouble with getting started on the Google Sheets API (v4) tutorial

I'm currently working my way through a tutorial that can be found at the link below: https://developers.google.com/sheets/api/quickstart/nodejs# When I reach the step of running the quick start file (node quickstart.js), I encounter the following err ...

javascriptnode.jsgoogle-apps-scriptgoogle-apps

"Debunking the traditional class assignment concept: What happens when two different classes

While working on creating a <div> element for a thumbnail gallery, I encountered a situation where I needed to apply two different classes to the <div>. One class was for positioning and the other for styling. However, when I tried to combine t ...

classcsshtml

Creating a sleek full-page container with a navigation bar using TailwindCSS

I am currently utilizing Tailwind CSS and in need of creating a layout that consists of: A sticky navigation bar A full-page section with content centered Other sections with varying heights A footer Below is a simple representation: +------------------- ...

htmlcssfrontendtailwind-css

How to make a checkbox list appear bold when checked in AngularJS?

<div class='someClass'> <label ng-repeat="item in itemList"> <input type='checkbox' checklist-model='itemCheckList' checklist-value='item.name'> <span class=& ...

htmlcssangularjs

Failed to cast to ObjectID due to mongoose error

Hello, I am facing an issue while attempting to add an event to a user's profile upon clicking on the event. The error message I'm encountering is "Cast to ObjectId failed for value "{ event: '600066640807165d042b91dd' }" at path "event ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to divide a single-item object array into three separate objects?

Here is the data structure for the response data: const res = { data: [{ name: 'c2', ipaddr: '192.168.1.5', port: 4435, sshuser: "abc", sshpass: "xyz", sshport: 22, license: 'licens ...

javascriptarraysobjectdata-structuresdestructuring

How can we stop the scrollTop animation in jQuery when the global variable counter equals zero?

I am currently working with a global variable that acts as a counter set to 3. While this is functioning correctly, I now face the challenge of needing my scrollTo animation to cease once the counter reaches 0. How can I prevent the scrollTop animation fro ...

jqueryscrollto

What is the proper way to use jQuery to append the value of the variable 'valCookie' to an array?

Is there a way to store the indexes of clicked elements in an array and save the state of a menu using cookies? How can I efficiently handle variable data in an array? $(document).ready(function() { //index array var indArray = []; var indToCook ...

javascriptjqueryarrays

Retrieve every item from a collection

Here's what I've got: objArray1 = [ { candidate1: "Alex" , votes: 4}, { candidate2: "Paul", votes: 3}]; objArray2 = [ { candidate1: "Alex" , votes: 7}, { candidate2: "Ben", votes: 3}, { candidate3: "Melisa", votes:8 }]; I'm using Javascri ...

javascriptarraysarraylist

YouTube videos cannot be embedded using an iframe on Firefox

I inserted a YouTube iframe code inside a div element. <div id="box"> <iframe width="300" height="315" src="//www.youtube.com/embed/82fn4mcNGJY" frameborder="0" allowfullscreen></iframe> </div> After applying CSS to sc ...

htmlcssiframeyoutubescale

Testing an Angular factory that relies on dependencies using JasmineJS

I have a factory setup like this: angular.module("myServices") .factory("$service1", ["$rootScope", "$service2", function($rootScope, $service2){...})]; Now I'm attempting to test it, but simply injecting $service1 is resulting in an &ap ...

javascriptangularjsunit-testingtestingjasmine

Is the Facebook AJAX Permissions Dialog displayed outside of a Pop-Up?

I have conducted extensive research but have failed to find a clear answer to my query. Although there is plentiful information on Facebook API AJAX/PHP communication, I am unable to locate an example where the Permission Dialog for an app (showPermissionD ...

phpjavascriptajaxfacebooksdk

Optimizing event mapping with the jQuery "on" function

CODE I: $searchBoxParent.on({ mouseover: function() { $this = $(this); $this.parent().find(".hlight").removeClass('hlight'); $this.addClass("hlight"); }, mouseout: function() { $this = $(this); ...

javascriptjqueryoptimization

"Troubleshooting: React-chartjs-2 Line graph fails to refresh with new data

I have a custom LineChart.js class with the following code snippet: import React from 'react' import {Line} from 'react-chartjs-2'; const data = { labels: ['red'], datasets: [{ label: 'My First Dataset&apo ...

javascriptreactjs

Convert AngularJS JSON.stringify to PHP

I am looking to pass additional data to the PHP script along with the form values. I have a JavaScript function called "cart.items()" that returns a string of items selected in the cart. How can I send this value to the PHP function? form.html ...

javascriptphpangularjs

Issue with a div box that is statically positioned

Is there a way to keep a div box in a fixed position on a webpage so it doesn't move when the page is scrolled? I've searched online for solutions, but all of them involved setting specific positions like top left or top right. I'm looking ...

javascripthtmlcss