Locate the class ID and refine the search results by another class

I am currently working on a task that involves extracting the first <li> element's id where it has the class name my_class, and checking if the <span> with the class Time contains a ":" using jquery.

Below is the sample HTML structure:

<ul class="list">
   <li id="myID-1" class=""> 
        <span class="Time">00h : 10m</span>
   </li>
   <li id="myID-2" class="my_class">
        <span class="Time">01h : 08m</span>
   </li>
   <li id="myID-3" class="my_class"> 
        <span class="Time">waiting</span>                                       
   </li>
</ul>

Javascript: 

var ID = $(".my_class").attr("id");

The challenge now is how to filter the results based on the class Time.

Is there anyone who can assist me in solving this issue?

javascriptjqueryhtmlcss

Answer №2

Experiment with this:

$(".my_class").find("span.Time:contains(':')").parent().attr("id");

Fiddle Site

Answer №3

Feel free to implement this code snippet.

$(".my_class").each(function(){
if($(this).child().hasClass("Time").text().indexOf(':') > -1)
{
     var uniqueId = $(this).attr("id");
}
});

Many thanks, Hayat S.

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

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

Glitch in Safari 6: Round Corners Issue

Greetings! Upon observing the image provided, an unusual behavior can be noticed in Safari 6 concerning round corners. { border-radius: 5px 5px 5px 5px; } Upon hovering over the elements, a thin line appears that seems to accumulate with each subsequent ...

safaricss

How to send a JavaScript variable to Flask and trigger an AJAX reload action

Introduction: I have explored similar inquiries and attempted to apply relevant code/concepts but without success. -https://stackoverflow.com/questions/43645790/passing-javascript-variable-to-python-flask -https://stackoverflow.com/questions/10313001/is- ...

javascriptpythonjqueryajaxflask

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Recently, I've been writing a unit test for my API using Jest and leveraging some boilerplate code. However, I hit a snag when an error popped up that left me scratching my head. Here is the snippet of code that's causing trouble: describe(' ...

javascripttypescriptjestjsmockingnestjs

Elements that are hidden or not displayed are still able to receive mouse over events

I am in the process of learning how to handle events within svgs and I have encountered a strange issue. Currently, I am working on an infovis project where I create an interface to display various column-graphs. This part is functioning well so far. Ho ...

javascriptcsssvg

Alert received upon selecting the React icon button

In the login code below, I have utilized FaEye and FaEyeSlash react icons. However, every time I click on them, a warning message pops up. To avoid this issue, I attempted to switch from using tailwindcss to normal CSS. Login.jsx import { useContext, useS ...

javascriptreactjsreact-icons

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

javascripthtmlcssangular

Is there a way to create a shadow effect using css?

I am attempting to replicate the subtle shadow effect displayed in the image. Struggling with implementing this shadow effect using CSS. I experimented with box-shadow: box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); resulting in: T ...

htmlcss

What is the best way to transfer data between a checkbox/radiogroup and textview located in separate activities using Eclipse?

Is there a way to display a list of items on different pages with checkboxes and radio buttons that allow users to select items and calculate the total price dynamically? How can this be achieved? Below is the code snippet for the main page: package com. ...

androidjqueryeclipsecheckbox

Using the JavaScript JSX syntax, apply the map function to the result of a

My aim is to create a structure resembling the following: <td> {phones.map((phone, j) => <p>{this.renderPhone(phone)}</p> )} </td> However, there may be instances where the phones array is not defined. Is it feas ...

javascriptarraysreactjsjsx

Is the data set in stone, or is it just the API data that can

Recently, I embarked on the journey of creating a blog using nextjs, MongoDB, and express. Taking advantage of getStaticProps and getStaticPaths, I was able to dynamically generate pages for each blog post and display them individually. However, I encoun ...

javascriptmongodbapinext.jsblogs

Displaying buttons within a component's onPress function will reveal the most recent information. Utilizing React-N

Currently, I am working on loading a component that contains an array from redux (for example, test). I have successfully created buttons with the correct titles, however, there seems to be an issue with the onPress function not displaying the expected v ...

javascriptreactjsreact-native

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

javascripthtml

Focused on individual characters in a string to implement diverse CSS styles

Is there a way I can apply different CSS classes to specific indexes within a string? For example, consider this string: "Tip. \n Please search using a third character. \n Or use a wildcard." I know how to target the first line with CSS using : ...

javascriptcssreactjs

When does the React state update warning occur on an unmounted component?

When is the appropriate time to verify if a component has been mounted? I frequently encounter a warning in the title when using setState calls. To avoid this warning, I have started declaring a variable and initializing it to true in componentDidMount, t ...

javascriptreactjsreact-nativereact-hooks

What is causing TypeScript to compile and remove local variables in my Angular base controller?

I am trying to develop a base controller in Typescript/Angular for accessing form data, but I'm encountering an issue where the form member seems to be getting removed during compilation and is not present in the generated JavaScript code. Could you ...

javascriptangularjstypescript

What is the best way to interact with a button in a HTML file using Selenium?

<div class="dropdown-div u-space-ls u-inline-block" data- reactid=".0.0.0.3.1"><a class="dropdown-div__button js-dropdown button" href="#" data-reactid=".0.0.0.3.1.0"><span class="u-pad-rs" data- reactid=".0.0.0.3.1.0.0">ACTIONS</sp ...

javahtmlselenium

Retrieve the value of an object from a string and make a comparison

var siteList = {}; var siteInfo = []; var part_str = '[{"part":"00000PD","partSupplier":"DELL"}]'; var part = part_str.substring(1,part_str.length-1); eval('var partobj='+part ); console.log(par ...

javascriptarraysjson

The issue of variable stagnation in Firefox content script while utilizing self.port.on

I'm having trouble updating the version var as intended. When I try to update it with the following code: self.port.on("get-version", ver => { version = ver; alert(version); }); An alert pops up displaying the correct version number, but the HTML ...

javascriptfirefoxfirefox-addonfirefox-addon-sdkcontent-script

How can we programmatically add click handlers in Vue.js?

Currently attempting to add some computed methods to an element based on mobile viewports exclusively. Here is a simplified version of my current project: <a class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTo ...

javascriptvue.jsvuejs2lifecycle