Trigger click on a element by clicking another element

Question

<div class="news">
 <div class="news-item"></div>
 <div class="news-item"></div>
 <div class="news-item"></div>
</div>

<div class="news-info">
 <div class="info-item"></div>
 <div class="info-item"></div>
 <div class="info-item"></div>
</div>

Hi! I have a html code just like the above. How can I trigger click event (using jQuery) on each 'info-item' element from 'news-info' div by clicking each element from the above 'news' div? I mean: when I click the first news-item to trigger click event on the first info-item and the same for the second and the third. I tried something like that:

$( ".news" ).each(function() {

        $(this).find( "news-item" ).on('click', function() {

            $('.news-info').find('.info-item').trigger('click');

        });

    });

If I understant well, if you click on the FIRST "news-item" you want to trigger the FIRST "info-item", the SECOND "news-item" the SECOND "info-item", etc.? — Mickaël Leger
– Mickaël Leger, Commented Dec 20, 2017 at 15:17

Temani Afif · Accepted Answer · 2017-12-20 15:23:14Z

1

You can use eq() that will allow you to select element based on his index and use index() to get the index of an element. With both functions, you can easily map the i-th element in the first container with the i-th element of the second one.

$(".news .news-item").click(function() {
  $(".news-info").find(".info-item").eq($(this).index()).trigger('click');
});


/* To test the click event */
$(".info-item").click(function() {
  $(this).css('color', 'red');
})

div {
  padding: 10px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news">
  <div class="news-item">a</div>
  <div class="news-item">b</div>
  <div class="news-item">c</div>
</div>

<div class="news-info">
  <div class="info-item">1</div>
  <div class="info-item">2</div>
  <div class="info-item">3</div>
</div>

edited Dec 20, 2017 at 15:23

answered Dec 20, 2017 at 15:17

Temani Afif

280k30 gold badges380 silver badges505 bronze badges

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

Comments

pitaridis · Accepted Answer · 2017-12-20 15:15:07Z

0

$( ".news" ).each(function() {

    $(this).find( "news-item" ).on('click', function() {

        $('.news-info').find('.info-item').click();

    });

});

answered Dec 20, 2017 at 15:15

pitaridis

3,0553 gold badges27 silver badges46 bronze badges

Comments

Carl Edwards · Accepted Answer · 2017-12-20 15:28:40Z

If the corresponding divs sequentially match you can grab the index of the clicked .news-item via index() and find the other through eq(). From there you can trigger the click. I added a second click handler just as an example.

$('.news .news-item').on('click', function() {
  var currentIndex = $(this).index();

  $('.news-info .info-item').eq(currentIndex).trigger('click');
});

$('.news-info .info-item').on('click', function() {
  console.log("I'm " + this.textContent + " and I've been clicked or clicked through a trigger!")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news">
  <div class="news-item">News Item 1</div>
  <div class="news-item">News Item 2</div>
  <div class="news-item">News Item 3</div>
</div>

<div class="news-info">
  <div class="info-item">Info Item 1</div>
  <div class="info-item">Info Item 2</div>
  <div class="info-item">Info Item 3</div>
</div>

PengFei Qiu · Accepted Answer · 2017-12-20 15:38:22Z

0

you can do it like this

$(".news div:first").click(function() {
$( ".news-info div:first" ).trigger( "click" ); 
});

try it online https://jsfiddle.net/2w27nLos/

answered Dec 20, 2017 at 15:38

PengFei Qiu

1

Collectives™ on Stack Overflow

Trigger click on a element by clicking another element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related