CODEWITHSUNDEEP
jqueryarrays
Joe Dev
Joe Dev

Reputation: 17

How to use jQuery array results and compare them with div IDs?

I have html looking like this. But it contains much more boxes and more entries in the "related" attribute - they are being dynamically loaded from the database according to the backend logic. 

<div id="container">

    <div id="134" class=box>
        <h3 related="157,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="157" class=box>
        <h3 related="134,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="167" class=box>
        <h3 related="205,210">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="202" class=box>
        <h3 related="134,157">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

</div>

What I want to do is to mark the related boxes with some class upon the input click on one of them. For example, if I click on #134 input - #157 and #202 boxes should get "related" class.

I generally understand what needs to be done but I'm having trouble with using the results I have in array to compare them with box IDs.

What I have so far: 

$('.box input').click(function () {
if (this.checked) {

var array = $(this).closest(".box").find("h3").attr('related').split(",");

$.each(array, function (i) {
   console.log(array[i]);
});

} else {

/* do something else */

}

}

Thank you.

Upvotes: 0

Views: 33

Answers (2)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

What you need should look something like this, it adds class to div.box according to the ids in the h3 related attribute and removes on unchecked

$('.box input').click(function() {
  var array = $(this).closest(".box").find("h3").attr('related').split(",");
  $.each(array, function(i) {
    $('#' + array[i]).toggleClass('someClass');
  });
});
.someClass {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div id="134" class=box>
    <h3 related="157,202">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="157" class=box>
    <h3 related="134,202">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="167" class=box>
    <h3 related="205,210">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

  <div id="202" class=box>
    <h3 related="134,157">Title</h3>
    <p>bla bla bla</p>
    <input name="" value="" type="checkbox">
  </div>

</div>

Upvotes: 1

balexandre
balexandre

Reputation: 75083

I would simply do, so you can also remove back when uncheck...

  • simply create a method that received an array of related id's
  • loop through all
  • and for each, find the checkbox and mark it, either checked or not

$('.box input').click(function () {
  var relatedIds = $(this)         // the clicked checkbox
           .closest(".box")        // the wrapper div
           .toggleClass('clicked') // let's add/remove a class
           .find("h3")             // the h3 with the properties
           .attr('related')
           .split(",");
           
  markAllRelated(relatedIds, $(this).is(":checked"));
});

function markAllRelated(relatedIds, check) {
    $.each(relatedIds, function (index, val) {
      $('#'+val)                        // the related element         
         .toggleClass("marked")         // add/remove the class
         .find("input[type=checkbox]")  // the input box
         .prop("checked", check);       // let's mark it
    });
}
.box {
  display: inline-block;
  width: 130px;
  background-color: #ccc;
}
.clicked {
  background-color: #ff0;
}
.marked {
  background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

    <div id="134" class=box>
        <h3 related="157,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="157" class=box>
        <h3 related="134,202">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="167" class=box>
        <h3 related="205,210">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

    <div id="202" class=box>
        <h3 related="134,157">Title</h3>
        <p>bla bla bla</p>
        <input name="" value="" type="checkbox">
    </div>

</div>

Upvotes: 0

Related Questions