При клике на один элемент внутри блока и таблицы кликнуть другой вне таблицы?

Question

[Grizar]

Имеем неизвестное и неограниченное количество блоков примерно такого вида.

<li class="poste">
   <div class=" ">
        <a>БЛОК 1</a>
       <div class="vsp-er">
               <span class="vsp-ive" style="background: #8BC34A;" title="" > <b>БЛОК 1-55</b></span>
               <span class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-99</b></span>
               <span class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-77</b></span>
               <span class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-RR</b></span>
        </div>
        <div>
          <table class="va-ns">
	      <tbody>
		<tr>
		    <td class="label">
                       <label for="xxx">XXX</label>               
                    </td>
		    <td class="value">
			<div class="va-tor va-en">
                          <select id=" " class="" name=" ">
                          </select>
                         </div>
                        <div class="ta-ws" name="at-а">
                             <span class="swa-age" title="10 " data-value="10 ">
                                <img src="10.png" alt="10 "><b>БЛОК 1-5</b></span>
                             <span class="swa-age" title="9" data-value="9">
                                <img src="9.png" alt="9"><b>БЛОК 1-9</b></span>
                          </div>	
                     </td>
		  </tr>
                  <tr>
		    <td class="label">
                       <label for="yyy">YYY</label>               
                    </td>
		    <td class="value">
			<div class="va-tor va-en">
                          <select id=" " class="" name=" ">
                          </select>
                         </div>
                        <div class="ta-ws" name="at-w">
                             <span class="swa-age" title="11" data-value="11">
                                <img src="11.png" alt="11"><b>БЛОК 1-7</b></span>
                             <span class="swa-age" title="12" data-value="12">
                                <img src="12.png" alt="12"><b>БЛОК 1-R</b></span>
                          </div>	
                     </td>
		  </tr>
		</tbody>
	</table>
   </div>
</li>
<li class="poste">
   <div class=" ">
        <a>БЛОК 2</a>
        <div class="vsp-er">
<span class="vsp-ive" style="background: #8BC34A;" title="" > БЛОК 2-55</span>
<span class="vsp-ive" style="background: #8BC34A;" title="">БЛОК 2-99</span>
        </div>
   <div class="tawcvs">
  <span class="swa-age" title="25" data-value="25" >
                            <img src=" " alt=" ">БЛОК 2-5 </span>
  <span class="swa-age" title="45" data-value="45" >
                            <img src=" " alt=" "> БЛОК 2-9 </span>
   </div>
   </div>
</li>

$(document).on('click', '.swa-age', function() {
  $(this).closest('.poste').find('.vsp-ive').eq($(this).index()).click();
});

<script>
  $('.swa-age').attr('id', function(index) {
  return 'swa-age_' + (index + 1);
})
  $('.vsp-ive').attr('id', function(index) {
  return 'vsp-ive_' + (index + 1);
})
//имитируем клик
document.getElementById('swa-age_1').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById('vsp-ive_1').click();
});	
</script>

Заранее благодарен.

Answer 1

[Igor Ustyugov]

Добавь им атрибутов, чтобы между ними была связь. Например

<span data-id="1" class="vsp-ive" style="background: #8BC34A;" title="" > <b>БЛОК 1-55</b></span>
<span data-id="2" class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-99</b></span>
<span data-id="3" class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-77</b></span>
<span data-id="4" class="vsp-ive" style="background: #8BC34A;" title="" ><b>БЛОК 1-RR</b></span>

<span data-id="1" class="swa-age" title="10 " data-value="10 "><img src="10.png" alt="10 "><b>БЛОК 1-5</b></span>
<span data-id="2" class="swa-age" title="9" data-value="9"><img src="9.png" alt="9"><b>БЛОК 1-9</b></span>
<span data-id="3" class="swa-age" title="25" data-value="25" ><img src=" " alt=" ">БЛОК 2-5 </span>
<span data-id="4" class="swa-age" title="45" data-value="45" ><img src=" " alt=" "> БЛОК 2-9 </span>

А потом

$(document).on('click', '.swa-age', function() {
    $('.vsp-ive[data-id="'+$(this).data('id')+'"]').click();
});

Comments

[Grizar]

Спасибо :)

[Grizar]

А как это все сделать чтобы работало в каждом li? потому как li несколько штук а элементов .swa-age и .vsp-iveможет быть разное количество, т.е. .swa-age- 4 штуки а .vsp-ive- три штуки