What is the best way to identify and remove duplicate elements within a table cell's select element?

After reviewing the question and demo,

How to compare several td.text() in tr using jQuery

https://jsfiddle.net/lmgonzalves/cqa6m6va/1/

It demonstrated how to detect duplicates within td elements.

My issue is figuring out how to achieve the same with select elements inside a td:

<td style="max-width:160px" class="ellipsis">
    <select class="select make-long-select fieldEditable ddSample" style="display:none;" name="sampleName">
        <option value="SampleValue1">SampleValue1</option>
    </select>
    <span class="lblSample lblCurrentValue">SampleValue1</span>
</td>
<!-- Other similar table cells -->

I need to replicate the same comparison behavior as shown in the previous question for this script.

I attempted the following approach but it did not work:

tds = $(this).find('td.ddSample');
tds.each(function(j, elem1){
    tds.each(function(k, elem2){
        if($(elem1)[0] != $(elem2)[0] && $(elem1).text() == $(elem2).text()){
            $(elem1).addClass('cl');
        }
    });
});

Note: I specifically want to compare data within ddSample (assuming other data exists within the tr).

Answer №1

click here to view the jsfiddle

I implemented the JQ code you provided, but instead of adding a class to the element (which is the option), I added the class to its parent (select). Then, in CSS, I styled the next span with color:red.

You can check the fiddle above or see the snippet below:

var opt = $(".ddSample option")

opt.each(function(j, elem1){
    opt.each(function(k, elem2){
        if($(elem1)[0] != $(elem2)[0] && $(elem1).val() == $(elem2).val()){
            $(elem1).parent(".ddSample").addClass('cl');
        }
    });
});

.cl + span{
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="max-width:160px" class="ellipsis">
    <select class="select make-long-select fieldEditable ddSample" style="display:none;" name="sampleName">
        <option value="SampleValue1">SampleValue1</option>
    </select>
    <span class="lblSample lblCurrentValue">SampleValue1</span>
</td>

<td style="max-width:160px" class="ellipsis">
    <select class="select make-long-select fieldEditable ddSample" style="display:none;" name="sampleName">
        <option value="SampleValue2">SampleValue2</option>
    </select>
    <span class="lblSample lblCurrentValue">SampleValue2</span>
</td>

<td style="max-width:160px" class="ellipsis">
    <select class="select make-long-select fieldEditable ddSample" style="display:none;" name="sampleName">
        <option value="SampleValue1">SampleValue1</option>
    </select>
    <span class="lblSample lblCurrentValue">SampleValue1</span>
</td>

<td style="max-width:160px" class="ellipsis">
    <select class="select make-long-select fieldEditable ddSample" style="display:none;" name="sampleName">
        <option value="SampleValue3">SampleValue3</option>
    </select>
    <span class="lblSample lblCurrentValue">SampleValue3</span>
</td>

Answer №2

programming javascript code

let tdsList;
$('tr').each(function(index, row){
    tdsList = $(this).find('td');
    tdsList.each(function(innerIndex, element1){
        tdsList.each(function(innerIndex2, element2){

            if($(element1)[0] != $(element2)[0] && $(element1).find("select").html() == $(element2).find("select").html()){
                console.log($(element1).find("select").html());
                $(element1).addClass('cl');
            }
        });
    });
});

View on jsfiddle

Answer №3

$(document).ready(function(){

                  $(".ddSample").children().each(function(index, value){
                               $(".ddSample").children().each(function(j, w){
                               if(index != j){
                                if($(value).val() == $(w).val()){
                                   $(value).parent().next().addClass("cl")
                                 }
                               }

                               });
                 });
});

Link to JSFiddle example

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

Use jQuery to detect the presence of the class .class, and if it exists, automatically append the same class to a specific #id element on a particular webpage

Need help with jQuery - adding a specific class to an element based on the presence of another class Hello everyone, I have searched through various forums and tried multiple code snippets in JavaScript and jQuery to no avail. Despite other scripts worki ...

Verify whether the keys of Object1 exist in Object2; if they do, compare their corresponding values

How can I accomplish the following task? I want to check if the keys of object1 are present in object2. If a key is found, I need to compare its value with that of object2. If the values are different, I should replace the value in object2 with the one fro ...

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com The goal is to conceal a specific div only when the user is on secondsite. The access to the HTML is limited, but there is an option to ...

Unveiling the steps to automatically conceal a submitted form in React, no longer requiring the manual activation of a toggle button

Currently, I have a list of songs and a toggle button that reveals a form to add a new song. However, I want the form to hide automatically after submission without requiring another button click. I tried using useEffect but couldn't get it to work. A ...

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

How can jQuery modify the behavior of the "this" operator when managing events?

Exploring a new class while diving into JQuery can be quite exciting. Take a look at this class I've been working on. function AutoHide(elemControl, elemContent) { this.elemControl = elemControl; this.elemContent = elemContent; this.delay = 500 ...

Retrieving data from a nested object with varying key names through ng-repeat

My JSON object contains various properties with unique names: var definitions = { foo: { bar: {abc: '123'}, baz: 'def' }, qux: { broom: 'mop', earth: { tree: 'leaf', water: 'fi ...

The PHP implementation of Google reCAPTCHA is malfunctioning when combined with AJAX

I have a form on 100.php that makes an AJAX call to 200.php. <html> <head> <!-- Include the reCAPTCHA API JavaScript library provided by Google --> <script src='https://www.google.com/recaptcha/api.js'></script ...

What is the best method to decrease every number in an array by 1?

If I start with a number array as follows: var numberarr = [1, 2, 3, 4, 5]; How can I transform it into the following array by decreasing each element by 1? var numberarr2 = [0, 1, 2, 3, 4]; ...

Circular arc with sleek, flawless curvature

I'm working with an arc circle model, and I'd like to make the edges appear smooth like a circle instead of being cut off. Is there a way to increase the edge segments, also known as tubular segments, when using TorusGeometry? Any suggestions on ...

What is the best method for deleting the hr element from the final post?

I'm looking to eliminate the final hr tag from the post Here is the full code snippet with an image: https://i.sstatic.net/4PpSl.png HTML code: @forelse (auth()->user()->experiences->sortByDesc('subject') as $experience) ...

Increase the node size within dynatree

After reviewing the examples provided by the developers of dynatree, I noticed that by including "expand: true" in a node, it should appear expanded from the start. I decided to create a SQL query: Doctrine_Core::getTable('Folder') ...

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Currently, I am utilizing https://github.com/bashleigh/typeorm-polymorphic for handling polymorphic relations in my model. There are several models involved: // Device Entity @Entity() @TableInheritance({ column: { type: 'varchar', name: 'ty ...

Why does the old component of the router still receive and handle events when <router-view/> changes?

Ugh... I need to explain a tricky situation I'm facing. I have a parent component that has two children listening for the same event and performing similar actions (see code snippet below): mounted() { EventBus.$on('edit', (data) => { ...

Once the script is imported, the functionality of the bootstrap slider ceases to operate

Once the script is imported, the bootstrap slider ceases to function properly. Adding this script causes the issue: <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> An error appears in the console: jquery.min.js:3 Unca ...

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

Attempting to create a dynamic layout for the objects using media queries and flexbox, however, the results are not as expected

.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; } .item { margin: 10px; border: 1px solid lightgray; border-radius: 10px; overflow: hidden; width: 100%; } @media scree ...

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

Utilize JavaScript to showcase a message based on the user's time measured in seconds

With a collection of 5000 text strings, each assigned a time value ranging from 0 to 86400 seconds... I am looking to determine the user's current time and display the corresponding text string. Subsequently, as the user's time changes, I aim to ...