從父數據屬性值中選擇子元素

Question

我有這種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>

我需要使用data-action="toggle"選擇元素內的每個輸入

我使用這個jQuery選擇器： $('[data-action="toggleQuestions"] :input');

但我需要選擇那些text值等於父data-trigger值的輸入。

是否可以直接使用選擇器？

Answer 1

邏輯太復雜，無法放入單個選擇器。 相反，您可以使用filter()來查找:input元素，然后將其父label的text()與容器上的data-trigger值進行匹配。 嘗試這個：

 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

使用以下代碼

$('[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);
        }
    });
});