Trigger click of element with selected css value in jquery

Question

i have some divs with same class please see this

<div class="parent" style="display:none">
        <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
        <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
        <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
        <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>
</div>

<div class="div2">text</div>

How to perform trigger click for class-1 which style colour is rgb(134, 122, 36)?

there are other jquery and other html part . I just written the basic for what i need . — Sharavan
– Sharavan, Commented Dec 22, 2016 at 9:09

Kevin Kloet · Accepted Answer · 2016-12-22 09:25:31Z

2

you can use jQuery's trigger() with the help of the jQuery attribute equals selector

$(".class-1[style='color:rgb(198, 172, 0);']").on('click', function(){
	alert('works');
});

$(".class-1[style='color:rgb(198, 172, 0);']").trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" style="display:none">
        <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
        <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
        <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
        <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>
</div>

<div class="div2">text</div>

edited Dec 22, 2016 at 9:25

answered Dec 22, 2016 at 9:16

Kevin Kloet

1,0861 gold badge11 silver badges21 bronze badges

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

1 Comment

Sharavan Over a year ago

could you please check stackoverflow.com/questions/41276905/…

Shubham Khatri · Accepted Answer · 2016-12-22 09:24:41Z

1

You can loop over the elements with a given class and then compare their css color attribute and trigger a click if it matches your requirement.

$(document).ready(function(){
  $('.class-1').on('click', function(){
    alert($(this).css('color'));
  })
  $('.class-1').each(function(index, item) {
    console.log($(item).css('color') == 'rgb(134, 122, 36)');
    if($(item).css('color') == 'rgb(134, 122, 36)') {
      $(item).trigger("click");
    }
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" >
    <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
    <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
    <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
    <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>

</div>

<div class="div2">text</div>

edited Dec 22, 2016 at 9:24

answered Dec 22, 2016 at 9:19

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Shubham Khatri Over a year ago

There is not much difference, you can just change the color attribute value to test.

Sharavan Over a year ago

could you please check stackoverflow.com/questions/41276905/…

pwnz22 · Accepted Answer · 2016-12-22 09:25:23Z

1

You also can do something like this.

$(function(){
    $(".class-1[style='color:rgb(134, 122, 36);']").on('click', function(){
        alert('red');
    });

    $('.class-1').each(function (i, el) {
        if($(el).attr('style') == 'color:rgb(134, 122, 36);') {
        $(el).trigger('click')
      }
    })
})

answered Dec 22, 2016 at 9:25

pwnz22

4692 gold badges9 silver badges19 bronze badges

1 Comment

Sharavan Over a year ago

could you please check stackoverflow.com/questions/41276905/…

Collectives™ on Stack Overflow

Trigger click of element with selected css value in jquery

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related