Using jQuery script with WordPress foreach loop

Question

Currently, I have this script:

<?php $test = get_categories('taxonomy=item&type=things');?>

    <?php foreach($test as $stuff) : ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
          var $things = <?php echo json_encode($stuff->name); ?>;
          console.log($things);
          $(".element").each(function() {
            var $state = $(this).attr("title");
            if ($things.indexOf($state) > -1) {
              $(this).addClass('current');
            }
          });
        });
        </script>
    <?php endforeach; ?>

Which is working, but I'm not sure how to get it out of the foreach loop so that it doesn't keep repeating the jQuery script over and over again.

Overall, I'm trying to get the values out from the get_categories via WordPress, but then pass the name value from the array and then check that within jQuery to add a class to specific elements within a div.

I know I'm probably going about the wrong way, so I'm completely open to suggestion if anyone knows a better, cleaner way of approaching this.

If you want it to be executed once only then use a flag ($has_executed = false) which can be toggled. — Script47
– Script47, Commented Oct 22, 2018 at 15:39
Where would that go specifically? In the foreach loop or somewhere else? — ultraloveninja
– ultraloveninja, Commented Oct 22, 2018 at 15:51
I think you're talking about not repeatedly outputting the JS code into the page, rather than not repeatedly executing it? Put the existing JS stuff into a JS function which you place elsewhere, outside the loop. Make it accept a single argument as input to the function. Then in the script block within the loop, the only JS you need is a call to this function, where you pass $things as the argument. Then you've got the function written once, but called many times. That's what functions are for, after all... — ADyson
– ADyson, Commented Oct 22, 2018 at 15:52

Vitali Protosovitski · Accepted Answer · 2018-10-22 15:54:23Z

1

Use array_column() to get all the names. Not tested code below

<?php 
$test = get_categories('taxonomy=item&type=things');
$names = array_column($test, 'name'); ?>

<script type="text/javascript">
jQuery(document).ready(function($) {
  var $things = <?php echo json_encode($names); ?>;
  console.log($things);
  $(".element").each(function() {
    var $state = $(this).attr("title");
    if ($things.indexOf($state) > -1) {
      $(this).addClass('current');
    }
  });
});
</script>

answered Oct 22, 2018 at 15:54

Vitali Protosovitski

5835 silver badges11 bronze badges

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

1 Comment

ultraloveninja Over a year ago

Actually this works out as intended, thanks! I'll keep messing with it cause I might have more data that might come back from that eventually.

Han · Accepted Answer · 2018-10-22 16:03:50Z

0

I like to separate PHP from JS as much as possible, and prevent multiple iterations. So I handle $names in PHP, then json_encode it for the JS portion to evaluate. Code below (not tested).

<?php
  $test = get_categories('taxonomy=item&type=things');

  foreach ($test as $stuff) {
    $names[] = $stuff->name;
  }
?>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    var $things = <?php echo json_encode($names); ?>;
    console.log($things);
    $(".element").each(function() {
      var $state = $(this).attr("title");
      if ($things.indexOf($state) > -1) {
        $(this).addClass('current');
      }
    });
  });
</script>

answered Oct 22, 2018 at 16:03

Han

214 bronze badges

1 Comment

ultraloveninja Over a year ago

Ahhhh, yeah. This is also what I was wondering about. A way to loop through the array, but have it stored in a variable. This helps, thanks!

Collectives™ on Stack Overflow

Using jQuery script with WordPress foreach loop

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related