Tips for using jQuery to add or append a class to the final li element

I am currently struggling to understand why the last child of the li element is not being inserted into the last li. This module functions as a treeview, and my main objective is to add a class to the last li.

Let me demonstrate with some sample code and illustrations below:

As you can see, the added class is on a different li element when it should be on the check mark.

Problem: The added class ('last') is not appearing on the correct last li.

I have two HTML pages:

  1. posting.blade.php
  2. manage_child.blade.php

posting.blade.php:

<ul id="tree1">
    @foreach($categories as $category)
        <li>
            {{ $category->title }}
            @if(count($category->childs))
                @include('/SuperAdmin/manage_child',['childs' => $category->childs])
            @endif
        </li>
    @endforeach
</ul>

manage_child.blade.php:

<ul>
@foreach($childs as $child)
    <li>
        {{ $child->title }}
    @if(count($child->childs))
        @include('/SuperAdmin/manage_child',['childs' => $child->childs])
    @endif
    </li>
@endforeach
</ul>

Treeview Js:

$.fn.extend({
    treed: function (o) {

        var openedClass = 'far fa-minus-square';
        var closedClass = 'far fa-plus-square';

        if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
        };

        // Rest of the JS code...

    }
});

// Initialization of treeviews

$('#tree1').treed();

CSS:

#tree1, #tree1 ul {
    margin:0;
    padding:0;
    list-style:none
}

// Rest of the CSS code...

Additionally, I want to remove the yellow background of the children with the .branch class.

Answer №1

To properly navigate through the tree structure, it is essential to descend downwards and select the final item. This action involves gathering all instances of li, singling out the last one, and assigning a specific class to it. Instead of employing the .is statement, implement the following code snippet:

branch.find('li').last().addClass('last');

If you specifically require this functionality based on the element that has been currently clicked, utilize the alternative method as shown below:

$(this).find('li').last().addClass('last');

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

Utilize an Ajax dropdown menu that allows users to enter search criteria, such as location or city

Looking for a way to display weather information based on a selected city? Check out this code snippet that uses Yahoo API to pull data and show weather details. Here's the code: <HTML> <HEAD> <TITLE>Find Weather in major cities ar ...

I'm attempting to slightly adjust the alignment of the text to the center, but it keeps causing the text to shift

I am facing an issue where I want to slightly center text, but whenever I add just 1px of padding-left, it moves to a new line. In my layout, I have 2 columns each occupying 50% width of the screen. One column contains only a photo while the other has a ba ...

What are the signs of a syntax error in a jQuery event like the one shown below?

One of my forms has an ID attribute of id ='login-form' $('#login-form').submit(function(evt) { $('#login-button').addClass('disabled').val('Please wait...'); evt.preventDefault(); var postData = ...

Can a child element be positioned above its parent's y-scrollbar using CSS?

I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over. Everything was working perfectly, until ...

Pop-up confirmation dialog in JQuery following an AJAX request

In order to validate on the server side whether a person with a specific registration number already exists in the database, I have implemented a process. If the person is found registered, the program flow continues as usual. However, if the number is not ...

Is it possible to determine if a relationship within a relationship is empty in Laravel 5.6?

I have a database table called survey that is related to another table called survey_question. The survey_question table, in turn, has a relationship with the survey_answer table. Here is an example of the data structure: "id": 4, //...table info... ...

Steps for clearing a set of checkboxes when a different checkbox is selected

While working on a website I'm developing, I encountered an issue with the search function I created. The search function includes a list of categories that users can select or deselect to filter items. This feature is very similar to how Coursera has ...

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

Using jQuery or JavaScript to clear multiple selections in a multiselect dropdown when a button is clicked

Is there a way to clear the dropdown selections once my function saves data to local storage? You can refer to this fiddle for more details: http://jsfiddle.net/3u7Xj/139/ I already have code in place to handle other form elements: var $form = $("#formI ...

Displaying a Kendo Grid within a Kendo Popup Dialog

Is it possible to display a kendo grid inside a kendo popup window? I want to create a popup window that will show data from my database when a button is clicked. What is the best way to accomplish this task? Are there any examples or tutorials available? ...

What could be causing the constant issue of receiving an empty $_FILE when attempting to upload a file using ajax and php

I am currently utilizing ajax to send form data and upload files from the client to the server (php). An issue arises when attempting to access the file content on the server side - for reasons unclear, the $_FILES variable appears empty regardless of my ...

Invalid parameter or query values detected in the next.js server-side rendering context

Take a look at my directory structure in next.js for handling dynamic routes. In my product page Server Side (SSR), I utilize params in this manner: While most of the time I am able to retrieve correct values, there are instances when productId returns t ...

Guide to Changing the Value of a Textbox Using Form jQuery

For instance: <form id="example1"> <input type="text" name="example_input"> </form> <form id="example2"> <input type="text" name="example_input"> </form> In the code above, both text boxes have the same name. H ...

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

Creating a static Top Bar that remains unaffected by page refreshing using Ajax or any other method can be achieved by implementing JavaScript and CSS

I've designed a sleek top bar for my upcoming website project. Below is the CSS code snippet for creating this clean div bar: .topbar { display:block; width:100%; height:40px; background-color:#f5f5f5; } I'm looking to incorporate a simple .SWF ...

Tips for incorporating additional file attachments in MVC and jQuery for uploading files

After exiting Yahoo, a new feature was introduced for attaching files. Once you click on the "Attach more files" button, it transforms into a single field where you can insert the file. The code snippet is shown below: <a href = "javascript: addUploa ...

Retrieve the ID of the nearest div without it being executed twice

I am currently working on implementing a close button using 'onclick' functionality. The goal is to hide the parent ID element when the user clicks the button, as shown below. function displayNone() { var id= $('.btnClose').closest ...

Issue with changing the opacity of a Javascript button style is not functioning correctly

The button's opacity used to change gradually in increments of 0.1 every 500 milliseconds, but now it instantly changes to 0.9 without the delay. Issue: Despite being placed within a window load handler and all elements loading properly, the loop is ...

Clearing a textarea in jQuery that is populated with text

Having an interesting dilemma. I'm trying to clear a <textarea> and then replace it with new content. The functions in the JSFiddle will work perfectly fine if the textarea is left empty, but as soon as any text is manually typed into it, the me ...

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...