CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
giammin
giammin

Reputation: 18958

Select child element from parent data attributes value

I have this kind of html blocks:

<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>

I need to select every input inside elements with data-action="toggle"

and Im using this jQuery selector: $('[data-action="toggleQuestions"] :input');

but I need to select those input which text value is equal to the parent data-trigger value.

Is it possible directly with a selector?

Upvotes: 1

Views: 1677

Answers (2)

Harshit Jain
Harshit Jain

Reputation: 492

Use the below code

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The logic is too complex to put in to a single selector. Instead you can use filter() to find the :input elements, then match the text() of their parent label to the data-trigger value on the container. Try this:

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>

Upvotes: 3

Related Questions