Is there a way to target the second li element within an ul list like this: HTML
<ul>
<li></li>
<ul>
<li>This one is what I need to select</li>
</ul>
</ul>
Is there a way to target the second li element within an ul list like this: HTML
<ul>
<li></li>
<ul>
<li>This one is what I need to select</li>
</ul>
</ul>
Firstly, your HTML code is incorrect. You cannot nest a ul inside another ul without it being wrapped in an li. Additionally, the text within the nested ul should also be enclosed in an li.
<ul>
<li>
<ul>
<li>I want to select this</li>
</ul>
</li>
</ul>
To target this element with jQuery, you can use the following selector:
$('ul > li > ul > li:first');
You could also use a less strict selector like ul ul li:first, depending on how closely you need to follow the specific HTML structure you have set.
It seems like the structure you have provided is not correct. The child <ul> tag should be placed inside an <li> tag for proper structuring.
Once you update the structure, it should look something like this:
<ul class="ul">
<li></li>
<li>
<ul>
<li>I want to select this </li>
</ul>
</li>
</ul>
You can then use jQuery to select that child <ul> element as follows:
$(".ul li ul");
I hope this explanation helps clarify things for you.
Test out this code snippet with various alternatives.
console.log($('ul > ul > li:eq(0)').text());
//Alternatively
console.log($('ul').find('ul > li:eq(0)').text());
//Another option
console.log($('ul').children('ul').find('li:eq(0)').text());
//Or try this
console.log($('ul > ul').find('li:eq(0)').text());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul><b>First ul</b>
<li>First li</li>
<ul> <b>Second ul</b>
<li>First li in second ul</li>
</ul>
</ul>To begin, you need to assign a class or an id to your parent ul :
<ul class="main">
<li></li>
<ul>
I would like to target this <li></li>
</ul>
</ul>
Next, you have two options for selecting the desired element. You can choose to target the second one by using its index (1) :
$(".main").find("li").eq(1)
Alternatively, you can add a class to the specific <li> element:
<ul class="main">
<li></li>
<ul>
I want to select this <li class="targetLi"></li>
</ul>
</ul>
Then, you can use the following:
$(".main").find(".targetLi")
If you're looking to select specific elements in your HTML using JavaScript, you can utilize the querySelector method. Take a look at the example below to see how it works.
var li = document.querySelector('ul ul li');
console.log(li.innerHTML);<ul>
<li>Not this</li>
<ul>
<li>I want to select this</li>
</ul>
</ul>Here's the plan: I need to extract information from an input element with type set as date. This data will then be stored in a .json file and later parsed when the program is initiated. Subsequently, I aim to utilize the date.getDay() function to dete ...
Looking for some help with Javascript on a simple task. When a specific option is chosen, I want to add an input field to a div element. <select name="amount" > <option value="50">50$</option> <option value="100">100$</o ...
Check out this AngularUI Datepicker demo on Plunker: http://plnkr.co/edit/DWqgfTvM5QaO5Hs5dHco?p=preview I'm curious about how to store the selected value in a variable or trigger another function when a date is chosen in the field. I couldn't ...
For my client-side validation on submit, I am calling a resource if the form is valid. On success, everything works fine. However, when encountering an error handler, I also perform server-side validation on my data transfer object bean which contains Hibe ...
I am trying to create a flexible length display using bxSlider. Here is the code I have so far. JS var duration = $('ul > li > img').data("bekleme"); $(document).ready(function () { $('.bxslider').bxSlider({ ...
Having trouble working with an AJAX call and handling the JSON object it generates in JavaScript? Here's a sample snippet of PHP code returning the JSON object: echo json_encode(array("results" => array(array("user" => $member['user'] ...
After successfully obtaining the API Response Time (duration) using the 'makeAPICall' function, I am now faced with the task of passing this duration variable value to another asynchronous function. Can anyone assist me in finding a solution to a ...
Previously, my Jest tests were functioning properly with Quasar version 0.14. Currently, some simple tests and all snapshot-tests are passing but I am encountering issues with certain tests, resulting in the following errors: console.error node_modules/vu ...
Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...
In my Vue.js project, I have an abundance of Javascript processing that is all local and doesn't require server-side functionality. I'm exploring the possibility of importing a file containing specific processing functions (such as mathematical a ...
Is there a way to use an interceptor in AngularJS to log "finished AJAX request" when any request is completed? I've been exploring interceptors and currently have the following setup, but it triggers at the beginning of the request rather than the e ...
My json data structure resembles the following: { "index": 1, "ln": "27953", "name": "Product 1", "availability": { "day0726": "G", "day0727": "G", "day0728": "G", } } I am looking for a way to dynamically disp ...
I have a collection of images stored in an array (image paths are stored in the array). I am trying to upload each image using a for loop, but only the last image gets uploaded. My approach involves using React Native Fetch Blob and Firebase for this task. ...
I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...
This snippet displays JS code to create a quiz index table and HTML code to display the index. function load(){ var data = [ { "id": "qc1111", "quizName": "Quiz1", "course": "111", "dueDate": "1/ ...
I am working on a script that displays different image URLs based on the time of day using an if-else statement. I want to dynamically load these images in an img src tag so that a different picture is loaded for each time of day. I have defined variables ...
In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect m ...
Here is my HTML code: <div id="summarySpan" style="padding-left: 20px" hidden> <label id="currentStatusSummary" style="padding-left: 20px" /> <br /> <label id="currentMonitoringSummary" style="padding-left: 20px" /> < ...
Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...
Currently working on a project using Ionic and Firebase, I am faced with the task of comparing arrays produced by users with those stored in Firebase. This comparison is essential for filtering a list of products. The user can reorder a list containing 3 ...