Utilize JQuery selectors or methods for seamless navigation through lists

I am currently facing an issue while navigating through an unordered list and fetching list items.

  foreach (MyTypeObject s in result)
        {

            oList.Clear();

             {


            oList.AppendFormat("<ul id='OuteroListItems'>");
            oList.AppendFormat("<li>");
            oList.AppendFormat("<ul id='oListItems'>");
            oList.AppendFormat("<li>" + s.Name + "</li>");
            oList.AppendFormat("<li>" + s.NameDesc + "</li>");
            oList.AppendFormat("<li>" + s.StartDate + "</li>");
            oList.AppendFormat("<li>" + s.EndDate + "</li>");
            oList.AppendFormat("</ul>");
            oList.AppendFormat("</li>");
            oList.AppendFormat("</ul>");

            sb.Append(oList);


        }

Alright, I am dealing with a scenario where there is a list of items within another unordered list that contains additional items.

My objective is to retrieve the start date for each item.

For instance, if there are 3 unordered lists inside 'OuteroListItems', I aim to identify all 3 StartDates from these lists and mark them red in 'oListItems'.

I attempted this process but it only marks the first element of the outer list as red in the 3rd inner list element.

   $("ul#OuteroListItems li").each(function(){

    $("ul#oListItems li:eq(2)").css("color", "red");

    });

Answer №1

Initially, ensure to utilize classes rather than IDs :) IDs need to be unique or you might encounter unexpected behavior...if they are not unique, it leads to invalid HTML. Simply switch id= in your code to class= for resolution. Now, your output should resemble this:

<ul class='OuteroListItems'>
  <li>
    <ul class='oListItems'>
      <li>s.Name</li>
      <li>s.NameDesc</li>
      <li>s.StartDate</li>
      <li>s.EndDate</li>
    </ul>
  </li>
</ul>

Subsequently, apply the following selector to access each StartDate <li>:

$(".oListItems li:nth-child(3)").css("color", "red");​

You can observe a functional illustration here

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

Display the div in all browsers except for Internet Explorer

There's a message in a div that needs to be displayed on the webpage, but it's not showing up on Internet Explorer. Even after attempting the usual , as well as other recommendations, the message still remains hidden. What could I be overlooking ...

Ensure that the password includes a character from each of the 3 arrays

What is the best approach to ensure that the password includes at least one character from each array? Would using a do..while loop be effective in achieving this requirement? I am unclear on what condition should go inside the if statement within the loop ...

Guide to linking a label to a checkbox without utilizing the "for=id" method

Below is the code snippet I am currently working with: <li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li> <li><inp ...

Creating a tabular layout using div elements and CSS styling

Here is the css and html code that I am working with: <style type="text/css"> .formLayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; border-radius: 1em; } ...

How come the words are clear, but the background remains unseen?

My markup looks like this: <div class="one">Content</div> <div class="two"></div> I have the following CSS styles: .one, .two { height: 20px; } .one { background-color: #f00; } .two { background-color: #0f0; margi ...

The CSS property `touchmove pointer-events: none` appears to have a malfunction on Chrome for Android version 4.4 / ChromeView

For my project, I am utilizing CSS pointer-events to allow touchmove events to pass through a transparent div. This method has been effective on most platforms except for Chrome on Android. I am curious if this is a known issue with Chrome and if there are ...

Ways to clear the cache on a webpage after updating scripts

After scouring the internet for a way to update user cache when a website is modified, I came up empty-handed. The only suggestion I found was setting version control on the URL of the script files... Below, I'm sharing my own solution and I'm w ...

Issue with margin spacing not desired on Internet Explorer 7

Encountering an unusual issue in Internet Explorer 7 where the heading appears with excessive space from the top. This issue is exclusive to IE 7 and not present in other browsers or newer IE versions. Any suggestions on how to resolve this? Chrome Versi ...

Encountering an issue with Google distance matrix where property 'text' is undefined

Below is a snippet of code that calculates the distance between two user-provided addresses. This code currently runs when the user submits a form in this manner: $("#distance_form").submit(function (e) { e.preventDefault(); calculateDistance(); }); ...

Navigating a C linked list proves to be quite challenging

Task description: The goal is to construct a linked list containing objects. Users will input data for each individual Node in the main function, and then the object will be passed to the push function which creates the list. The issue arises in the print ...

Create a static div and a separate scrolling div

I am looking to achieve a layout where the top div is fixed at the top of the screen and the second div is scrollable below it. Both divs should have the same column width. I attempted to use position: fixed, but the columns are not aligned directly benea ...

Discovering if a page can be scrolled in Angular

Hey there, I recently started working with Angular and created an app using the angular material stepper. The issue I'm facing is that some of the steps have longer content, causing the page to become scrollable. I am now trying to find a way to deter ...

Maintaining Changes in Javascript and CSS

I have created a header that can slide in and out of view with a toggle function. However, I want the header to be in the down position by default, without requiring users to click the toggle every time a new page loads. I have limited knowledge of JavaScr ...

I am experiencing an issue where my REST call is being triggered twice while using AngularJS

Why is my REST call triggering twice when I make the call from the UI? I am using Java v8 and AngularJS v1.6, here is the service: import com.project123.temp.component.ImportFileComponent; @Component @Path("project123/ImportFileService") @JsonIgnorePrope ...

Sending JavaScript Variables to MySQL Database via PHP

I'm currently attempting to pass a JavaScript variable to PHP, but I'm unsure of the best method to do this. I've heard about Ajax, but I haven't used it before and find it difficult to understand. Can anyone suggest an easier way to ac ...

Refreshing select2 dropdown options dynamically with AJAX updates

I have a select dropdown for locations that is initialized using select2 on page load. I am looking to dynamically update the data in the dropdown at regular intervals using ajax calls. However, when I attempt to update the data in select2, the dropdown ...

Blurry oval box shadows in CSS are not visually appealing

I'm working on a school project that involves replicating a website. I'm trying to achieve a shadow effect under text in an oval shape, but so far my attempts have just resulted in a blurry rectangle. Here is what I have currently: Click here A ...

How can I vertically align content in Bootstrap 4 without causing horizontal overflow on mobile devices?

Struggling with my registration page on the login form - I've utilized Flex and Vertical Align classes from Bootstrap 4 to center my div vertically. Works great on tablets and larger devices, but encountering an overflow issue on mobile devices: http ...

Shopify revamping the design of the collections

Looking to enhance the layout of a collection page by moving from a single column to having at least three items per row. The current layout can be viewed here Proposed new layout example shown here 1: Below is a snippet of the code I believe needs adj ...

I am looking to update the background color of my Bootstrap navigation bar

I am looking to update the background color of my bootstrap navigation bar. Here is the current look: https://i.sstatic.net/szUXD.png The HTML code I have been using is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...