Filtrowanie poprzez atrybut - JQuery

Cześć,

Stworzyłem stronę, która w przyszłości ma być czymś w rodzaju czatu. Póki co jedyne co zostało na niej zrobione, to lista chatów użytkownika, ale chciałem dodać możliwość wyszukiwania ich za pomocą atrybutów(do wartości ładuję tylko nazwę chatu).

Czaty ładuję w taki sposób:

$(document).ready(function() {
    function generateDiv(chatName,chatCode){
        let generated = new String(`
        <div class="chatRepresentation" role="listitem" code="${chatCode}" name="${chatName}">
            <h3> ${chatName} </h3>
        </div>`);
        return generated;
    }

    function fillChatList(){
        $.ajax({
            type: "post",
            url: "actions/getUserChats.php",
            data: {},
            beforeSend: function() {

            },
            success: function(response) {
                var json = JSON.parse(response);
                var chatCount = json.userChats;
                var loaded = 0; //TODO loading bar
                for(let i in json.chats){
                    $('#chatList').append(generateDiv(json.chats[i]["NAME"], json.chats[i]["CHAT_CODE"]));
                    loaded++;
                }
            }
        })
    }
    fillChatList();
})

Na razie nie wiem jak to przefiltrować :/

z góry dziękuję za pomoc

Filtrowanie ma polegać na pobraniu wszystkich divów, które mają konkretny atrybut, tak?

// Przykład bez jQuery
const specificChatRooms = document.querySelectorAll('.chatRepresentation[name="tutaj jakaś nazwa"]');

// Przykład z wykorzystaniem jQuery
// const $specificChatRooms = $('.chatRepresentation[name="tutaj jakaś nazwa"]');

EDIT:

Tutaj masz kilka dodatkowych przykładów jak działa ten selektor
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Xarviel napisał(a):

Filtrowanie ma polegać na pobraniu wszystkich divów, które mają konkretny atrybut, tak?

// Przykład bez jQuery
const specificChatRooms = document.querySelectorAll('.chatRepresentation[name="tutaj jakaś nazwa"]');

// Przykład z wykorzystaniem jQuery
// const $specificChatRooms = $('.chatRepresentation[name="tutaj jakaś nazwa"]');

Pytanie jeszcze, jak mogę sprawdzić, jak mogę sprawdzić, czy argument zawiera jakieś słowo?

Początkowo zrobiłem coś takiego, ale niestety nie działało(stąd też post na forum)

$('.chatRepresentation').each(
            function(){
            var attr = $(this).attr('name');
            if (typeof attr === 'undefined' && attr === false) return;
            if (!($(this).attr('class').indexOf(searchKeyWord) > -1)) {
                $(this).removeClass('hidden')
                return;
            }
            $(this).addClass('hidden');
            }
        )

teraz mam coś takiego:

$('#search-submit').on("click", function () {
        var searchKeyWord = $('#search-typeArea').val();
        if (!searchKeyWord) {
            $('.chatRepresentation').removeClass('hidden');
            return;
        }
        $('.chatRepresentation').addClass('hidden');
        const specificChatRooms = document.querySelectorAll(`.chatRepresentation[name="${searchKeyWord}"]`);
        $(specificChatRooms).removeClass('hidden');
        // $('.chatRepresentation').each(
        //     function(){
        //     var attr = $(this).attr('name');
        //     if (typeof attr === 'undefined' && attr === false) return;
        //     if (!($(this).attr('class').indexOf(searchKeyWord) > -1)) {
        //         $(this).removeClass('hidden')
        //         console.log($(this).val());
        //         return;
        //     }
        //     $(this).addClass('hidden');
        //     }
        // )
    })

[dopiero teraz zauważyłem link, selektor z *= działa]

Można zrobić to w taki sposób

// Słówko "wartość" musi znajdować się na samym początku
const $chat = $('.chatRepresentation[name^="wartość"]');

// Słówko "wartość" może się znajdować w dowolnym miejscu
const $chat2 = $('.chatRepresentation[name*="wartość"]');

// Słówko wartość musi znajdować się na samym końcu
const $chat3 = $('.chatRepresentation[name$="wartość"]');

// Tutaj jest zaprzeczenie i wyszuka wszystkie divy, które nie posiadają atrybutu o takiej wartości
const $chat4 = $('.chatRepresentation:not([name="wartość"])');

// Wyszuka diva z dokładnie taką wartością atrybutu
const $chat5 = $('.chatRepresentation[name="wartość"]');

I jak pobierzesz potrzebne elementy to możesz zrobić po nich pętle tak jak teraz

$chat.each(function() {
  // ...
});

Masz jakiś konkretny powód żeby używać jQuery? Bo teraz to już przestażała technologia.

PS: Nie mówię żeby od razu wyciągać frameworki; tylko cokolwiek dzisiaj jQ oferuje to vanilla-js również ma.

Nie do końca zrozumiałem, o co chodzi z "filtrowaniem poprzez atrybut", ale jak sobie to wyobrażam, że masz kilka czatów (dajmy na to, że będą to przykładowo Polityka, Muzyka, Humor ) i chcesz pokazywać tylko niektóre z czatów?

To w ogóle najlepiej nie robić tego na poziomie HTMLa, tylko raczej mieć jakąś zmienną JS (dajmy na to activeChat) i na tej podstawie wyświetlać/chować czaty. Mógłbyś mieć listę czatów w jakiejś tablicy i później przelatywać przez tablicę i chować/pokazywać czaty w zależności od tego, czy są wybrane.

Czyli:

• w JS trzymanie i filtrowanie danych i aktualnego stanu (które czaty są wybrane). Czyli w JS możesz mieć wszystkie dane czatów. Czyli kod HTML grałby to rolę drugorzędną.
• w HTML (czyli to, co robisz za pomocą jQuery) natomiast mógłbyś tylko wyświetlać dane z JSa (bo póki co to robisz odwrotnie - próbujesz zaprogramować całą apkę w HTML, a JS traktujesz jak język pomocniczy)