Sélectionnez élément enfant à partir des données parent attributs valeur

Question

J'ai ce genre de blocs html:

<div data-target="TargeID" data-action="toggle" data-trigger="Yes"> 
    ... 

    <ul> 
     <li> 
      <label class="radio"> 
      <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_0" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl01$rbAnswer"> 
      Yes    
      </label> 
     </li> 

     <li> 
      <label class="radio"> 
      <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_1" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl02$rbAnswer"> 
      No    
      </label> 
     </li> 

     <li> 
      <label class="radio"> 
      <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_2" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl03$rbAnswer"> 
      maybe    
      </label> 
     </li> 
    </ul> 
</div> 

J'ai besoin de sélectionner chaque entrée à l'intérieur des éléments avec data-action="toggle"

et Im en utilisant ce sélecteur jQuery: $('[data-action="toggleQuestions"] :input');

mais j'ai besoin de sélectionner les entrées dont la valeur text est égale à la valeur parente data-trigger.

Est-il possible directement avec un sélecteur?

Answer 1

La logique est trop complexe à mettre en un seul sélecteur. Au lieu de cela, vous pouvez utiliser filter() pour trouver les éléments :input, puis faire correspondre le text() de leur parent label à la valeur data-trigger sur le conteneur. Essayez ceci:

var $container = $('[data-action="toggle"]'); 
 
var $input = $container.find(':input').filter(function() { 
 
    return $(this).closest('label').text().trim() == $container.data('trigger'); 
 
}) 
 

 
$input.prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-target="TargeID" data-action="toggle" data-trigger="Yes"> 
 
    <ul> 
 
    <li> 
 
     <label class="radio"> 
 
     <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_0" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl01$rbAnswer"> 
 
     Yes    
 
     </label> 
 
    </li> 
 
    <li> 
 
     <label class="radio"> 
 
     <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_1" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl02$rbAnswer"> 
 
     No    
 
     </label> 
 
    </li> 
 
    <li> 
 
     <label class="radio"> 
 
     <input id="cpMainContent_ctl24_rptAnswers_rbAnswer_2" type="radio" name="cpMainContent_ctl24" value="ctl00$cpMainContent$ctl24$rptAnswers$ctl03$rbAnswer"> 
 
     maybe    
 
     </label> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

utiliser le code ci-dessous

$('[data-action="toggle"]').each(function() { 
    var triggerValue = $(this).attr("data-trigger"); 

    $(this).find('input[type=radio]').each(function() { 
     if ($(this).parent().text().trim() === triggerValue) { 
      $(this).prop("checked", true); 
     } 
    }); 
});