Looking to organize my divs by data attributes when clicked - how can I achieve this with javascript?

I am looking to implement a dropdown sorting functionality for multiple divs based on different data attributes such as price and popularity. The specific divs are labeled as "element-1" and are contained within the "board-container".

var divList = $(".element-1");

function sortPrice(){
divList.sort(function(a, b){ return    
$(a).data("price")-$(b).data("price")});    
$(".board-container").html(divList);}

function sortPopularity(){
divList.sort(function(a, b){ return
$(a).data("popularity")-$(b).data("popularity")});    
$(".board-container").html(divList);}


<div class="board-container">
    <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
        <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/kunta.png">
    </div>
    <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/astrid.png">
    </div>
    <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">

                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/zayn.png">
    </div>
    <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
            <div class="overlay-text">
                <div class="table">
                    <div class="cell">
                        <div class="title">King Kunta</div>
                        <div class="artist">Kendrick Lamar</div>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/jason.png">
    </div>
  </div>
javascriptjqueryhtmlcss

Answer №1

Implement a dropdown menu and attach a change event handler to it. In the event handler, sort the elements based on the selected value.

var $divList = $(".element-1");

$('#drop').change(function() {
  var prop = this.value;
  $divList.sort(function(a, b) {
    return $(a).data(prop) - $(b).data(prop)
  }).appendTo(".board-container")
}).change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="drop">
<option value="date">Date</option>
<option value="popularity">Popularity</option>
</select>
<div class="board-container">
  <div class="element-1" data-date="4" data-popularity="3">
    <a class="group1" href="img/zayn.png">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>1
    <img src="img/kunta.png" />
  </div>
  <div class="element-1" data-date="3" data-popularity="3">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?     rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>2
    <img src="img/astrid.png">
  </div>
  <div class="element-1" data-date="1" data-popularity="12">
    <a class='youtube' href="https://www.youtube.com/embed/C_3d6GntKbk?rel=0&amp;wmode=transparent">
      <div class="overlay-wrapper">
        <div class="overlay-text">
          <div class="table">
            <div class="cell">

              <div class="title">King Kunta</div>
              <div class="artist">Kendrick Lamar</div>
            </div>
          </div>
        </div>
      </div>
    </a>3
    <img src="img/zayn.png">
  </div>
  <div class="element-1" data-date="5" data-popularity="1">
    <div class="overlay-wrapper">
      <div class="overlay-text">
        <div class="table">
          <div class="cell">
            <div class="title">King Kunta</div>
            <div class="artist">Kendrick Lamar</div>
          </div>
        </div>
      </div>
    </div>4
    <img src="img/jason.png">
  </div>
</div>

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

Alter the entity type when passing it as a parameter

Trying to alter the Entity type, I am invoking a function that requires two parameters - one being the entity and the other a location. However, when trying to assign a Type for the first entity, it throws an error: Error: Argument of type 'Node<En ...

javascripttypescript

Using jQuery to transfer URL parameters to another page

I have successfully implemented a function to transfer information from checkboxes to the URL using the following code: jQuery $('input[type="checkbox"]').on('change', function(e){ var data = $('input[type="checkbox"]'). ...

jquery

"Turn a blind eye to Restangular's setRequestInterceptor just this

When setting up my application, I utilize Restangular.setRequestInterceptor() to trigger a function that displays a loading screen whenever a request is made with Restangular. Yet, there is a specific section in my application where I do not want this fun ...

javascriptangularjsrestangular

Guide on sending a JavaScript variable to PHP using AJAX

I am currently utilizing the following JavaScript code to obtain data from a td element when a button is clicked within an onclick event. function rfk(element) { var element = element.parentElement.parentElement; var id = parseInt(element.childre ...

javascriptphpajax

Combine multiple key values from an array of objects into a single array

I have a set of key and value pairs that I need to filter based on whether the values are in an array or not, and then combine them into a single array. const holiday_expenses = { food: [{name: "abc", place: "xyz"}], travel: [{name: ...

javascriptreactjsangularjskey-value

The Jquery .change() function refreshes the results just once

I am working on a form with 3 input fields named #first, #second, and #third, along with a fourth field labeled as #theResult. <div id="addFields"> <span id="addFieldsHeader">Add The Fields</span> <table style="margin:0 auto;"> ...

javascriptjquery

Retrieving intricate JSON data from a specific web address

I need assistance in extracting and printing the date value from the JSON content available at the specified URL. Specifically, I am looking to retrieve the date value of "data.content.containers.container.locationDateTime" only if the "data.content.conta ...

javascriptphpjqueryjson

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...

jquerycssfade

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

jqueryhtmlcss

Guide on sending JSON object to Angular custom components

I have implemented a custom element in Angular 7 using the CUSTOM_ELEMENTS_SCHEMA. My app.module.ts code is as follows: export class AppModule { constructor(private injector: Injector) {} ngDoBootstrap() { this.registerCustomElements( ...

javascriptangulartypescriptangular7custom-element

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it. Here is the code snippet that I'm currently using: function followIt(e) ...

javascripthtmlcssdom-events

Issue with JQuery: Inability to deactivate an element after receiving an Ajax response

My dynamic dialogue box, generated via Ajax return, presents a challenge involving the dynamically changing drop-down list element $('#functionSelect'). I require this list to trigger disabling of input fields within the dialogue box upon changes ...

javascriptjqueryhtmlajax

Import information from a MySQL table into a single input field

I am currently working on a project that involves retrieving data from a MySQL database and displaying it in a single field. Below is the MySQL code I am using: My goal is to load all the data from $row['db_numbers']; into the field. <input t ...

phphtmlmysql

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

javascripthtml

Is there a way to position an X item on the first row and another X item on the following row using flexbox?

I want to use flexbox to arrange 10 buttons in a row on a large screen. On a medium screen, I'd like 5 buttons on the first row and 5 on the second row. For small screens, 2 buttons per row, and for very small screens, one button per row. It's im ...

csswebflexbox

What is the best way to include my preferred links for reading with PHP Universal FeedParser?

Recently, I've been experimenting with the PHP Universal FeedParser to retrieve and display RSS feeds on my website. However, as a newcomer to this technology, I have encountered some challenges. While the initial link provided in the sample works wit ...

phphtmlcssxmlrss

What was the reasoning behind Mozilla's decision to implement a conditional catch clause?

Discover the unique Conditional Catch Clauses from Mozilla Delve into this question out of pure curiosity - why would Mozilla venture beyond standard structures with this innovative feature? What specific challenges or issues is it designed to address? W ...

javascriptexceptionmozilla

Can you explain the functionality of this JavaScript registration code?

I am working on an ajax/jquery 1.3.2 based sign up form and I am looking to gain a deeper understanding of how to incorporate jquery into my projects by analyzing the code line by line. Could someone provide a detailed explanation of this code and break d ...

javascriptjqueryajax

Tips for utilizing a personalized extension in Visual Studio Code

Embarking on my HTML journey, so please bear with me. I've been watching tutorial videos to get a better grasp of it, and one of the tutorials I'm following shows how to create a resume on GitHub using VS Code. Check out the video here At 3:44 ...

htmlcssvisual-studio-codefonts

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...

javascripthtmlonclickhyperlinkajax-request