Dynamic PHP variables for jQuery use

Question

I'd like to apply jQuery to classes that are generated dynamically as they are looped through PHP/MySQL.

I've got a non-dynamic working version on JSfiddle: jsfiddle.net/TXJA5/1/

In the example, cat_fruit, cat_vegetable and cat_cereal would be echoed within a PHP loop; something like:

<div class="category cat_<?php echo $category; ?>">
    <p><?php echo $category_label; ?></p>
</div>

Then, in following columns, there will be divs containing items associated to the category:

<div class="column">
    <div class="item cat_<?php echo $category; ?>">
        <p><?php echo $item[0]; ?></p>
        <p><?php echo $item[0]; ?></p>
    </div>
</div>

So, why? Well, while the data is variable and "categories" exist in one column and "items" exist within other columns in another div, I need the associated divs to be identified by jQuery to make them the same height (using equalizeCols — see the fiddle; you'll get it.)

n.b. There's a reason this isn't a table, despite the obvious column/row relationships. I considered it (fretfully) and tried it, but it won't work for the needs of the actual project.

Thanks in advance for any help you can offer. This is my first question on SO after years of learning from it — this community is awesome. I've found a couple questions on here that may make mine look like a duplicate, but they couldn't quite help get me there!

errnesto · Accepted Answer · 2014-02-07 21:16:32Z

2

<div class="column">
    <div class="category" data-cat="<?php echo $category; ?>">
        <p><?php echo $item[0]; ?></p>
        <p><?php echo $item[0]; ?></p>
    </div>
</div>

I guess you can add a data atribute (or an id) in the first column and then loop through those with jQuery:

$('.category').each(function(){
    var category = $(this).attr('data-cat');
    $(".cat_"+category).equalizeCols();
});

http://jsfiddle.net/TXJA5/2/

answered Feb 7, 2014 at 21:16

errnesto

8325 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mbecares · Accepted Answer · 2014-02-07 21:21:23Z

0

You can loop categories in the same way you do in the HTML part of the code:

<?php for(...){ ?>
    var $els = $(".cat_<?php echo $category?>").equalizeCols();
<?php } ?>

If I understand your question and issue OK this is the solution. If this is not your issue please be more specific.

edited Feb 7, 2014 at 21:21

answered Feb 7, 2014 at 20:55

mbecares

1165 bronze badges

Collectives™ on Stack Overflow

Dynamic PHP variables for jQuery use

2 Answers 2

Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Dynamic PHP variables for jQuery use

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related