Search based on list item class

Question

I'm not too familiar with anything beyond writing markup and CSS, and I have a question..

If I have one .html page with a structure like this:

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Now let's assume each of these list items has a class assigned to it, but the class is not unique, and is used multiple times. Is it possible to fetch all list items based on a certain class to another .html page? For example, summon all list items with class "red" to a page called red.html, and all items with class "blue" to blue.html.

Is there any simple way to do this with PHP or another basic method?

Any input is appreciated.

Answer 1

lets say that is your html:

<ul id="list">
<li class="red"></li>
<li class="blue"></li>
<li class="red"></li>

then you could accomplish this with javascript by grabbing the desired elements and then sending these using ajax method to desired page.

$(function(){

var elements = $('#list').children('.red');

$('#button').click(function(){  
    $.ajax({
        method: 'POST',
        url: 'somepage.php',
        data: elements,
        success: function(data) {
            $('#result').html(data);
      }
    });   
});

});

Note that i'm using jQuery here, it would look differently in plain javascript... hope this helps :)