CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2655970
user2655970

Reputation: 123

How to hide div when one of the child elements (img) has a specific property?

In my webpage I have a label and a checkbox. The checkbox is generated by Salesforce (hence the span id looks dynamic).

This is the code snippet from my webpage.

<div class="fds" id="checkinput">
<label>Additional Review</label>
<span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

The span tag and the underlying img is generated by Salesforce.

I would like to know if possible via jQuery to render the "checkinput" div invisible or hidden if the img tag's title (or alt) is "Not Checked".

Is it possible ?

Upvotes: 1

Views: 71

Answers (3)

MicFin
MicFin

Reputation: 2501

Use jQuery $("[],[]") OR syntax to select based on those attributes.

    $( "[img[alt='Not Checked']], [img[title='Not Checked']]" ).each(function(img) {
      
      $(img).parent().parent().hide() // using parent relationship to hide

      // $(img).closest(".fds").hide() // alternative using class to hide
      // $("#checkinput").hide(); // alternative using id to hide
    })

Upvotes: 1

Racil Hilan
Racil Hilan

Reputation: 25351

You can use the attr() method to check the value of your image attributes:

(function() {
  var img = $(".checkImg");
  if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
    $("#checkinput").hide();
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Edit If you have several of those divs with their images and you want to process them all in the same way, try this:

(function() {
  $(".fds img").each(function() {
    var img = $(this);
    if (img.attr("title") === "Not Checked" || img.attr("alt") === "Not Checked")
      img.closest(".fds").hide();
  });
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput1">
  <label>Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
     <img src="/img/checkbox_checked.gif" alt="Checked" width="21" height="16" class="checkImg" title="Checked"/>
  </span>
</div>
<div class="fds" id="checkinput2">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c2">
     <img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked"/>
  </span>
</div>

Upvotes: 1

brk
brk

Reputation: 50326

Use find & attr method to get the img and its title attribute.Then use hide method to hide the div

var titleConstant = "Not Checked";

var getImgTitle = $("#checkinput").find("img").attr('title');
if (getImgTitle === titleConstant) {
  $("#checkinput").hide()

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fds" id="checkinput">
  <label>Additional Review</label>
  <span id="j_id0:asp-acc-details:as-c1">
<img src="/img/checkbox_checked.gif" alt="Not Checked" width="21" height="16" class="checkImg" title="Not Checked">
</span>
</div>

Upvotes: 1

Related Questions