Force нажмите с триггером() на ближайший DIV

Question

Привет У меня есть код последующие:

$('.myInput').click(function() { 
 
    $('.addon').trigger('click'); 
 
}); 
 

 
$('.addon').click(function() { 
 
    console.log("Clicked"); 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.inputWithAddon { 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 
input { 
 
    height: 20px; 
 
} 
 
.addon { 
 
    width: 26px; 
 
    height: 26px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
</div>

Я хотел бы, чтобы заставить щелчок trigger() на мой зеленый DIV, когда я нажал на входе. Это должно быть на div от текущего щелкнутого входа (с правой стороны). На данный момент он вызывает щелчок для всех зеленых div (смотрите консоль). Я хотел бы просто сделать это для div из щелкнутого ввода. Я попробовал closest():

$(this).closest('.addon').trigger('click'); 

Это не сработало.

Любые идеи?

Спасибо.

Answer 1

Попробуйте использовать родственное свойство Jquery

$(this).siblings('.addon').trigger('click');

Answer 2

Возможного SOLN будет:

$(this).parent().find('.addon').trigger('click'); 

или как @Mohammad упоминался кратчайшим:

$(this).next().trigger('click'); 

или @Deepak Singh ответил:

$(this).siblings('.addon').click(); 

или @freedomn-m упоминается (больше) макет решение: самостоятельный

$(this).closest(".inputWithAddon").find(".addon").click(); 

$('.myInput').click(function() { 
 
    $(this).next().trigger('click'); 
 
}); 
 

 
$('.addon').click(function() { 
 
    console.log("Clicked"); 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.inputWithAddon { 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 
input { 
 
    height: 20px; 
 
} 
 
.addon { 
 
    width: 26px; 
 
    height: 26px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="inputWithAddon"> 
 
    <input class="myInput"> 
 
    <div class="addon"></div> 
 
    </div> 
 
</div>