Найти первый подходящий элемент массива

Question

Есть блок с radiobutton, у них есть data атрибуты. Как проверять, заполнен ли data атрибут, и первый элемент, у которого он заполнен, делать выбранным по умолчанию при загрузке страницы. Вот пример верстки:

<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

То есть, например если мы имеем такой набор кнопок, быть выбранной тут должна быть 3 кнопка, так как она первая из тех, что удовлетворяет условию (имеет не пустой data атрибут example)

UPD:Таких блоков может быть несколько, и нужно в каждом находить первый подходящий элемент

<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>
<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio-2" data-example="test">
    <input class="radiobuttons__list-item" type="radio" name="radio-2">
</div>

Answer 1

$('.radiobuttons__list-item').each(function(i,item){
  if(typeof $(this).attr('data-example') != 'undefined' && $(this).attr('data-example') != ''){
  $(this).prop('checked',true); 
  return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

Answer 2

Для одиночного блока можно сделать таким образом:

const elements = document.querySelectorAll('.radiobuttons__list-item');
const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-example'));

notEmptyElement.setAttribute('checked', 'checked');

Если таких блоков на странице несколько - можно сделать так:

const wrappers = document.querySelectorAll('.radiobuttons__list');

const selectNoEmptyButton = wrapper => {
  const elements = wrapper.querySelectorAll('.radiobuttons__list-item');
  const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-example'));

  notEmptyElement.setAttribute('checked', 'checked');
};

[...wrappers].forEach(wrapper => selectNoEmptyButton(wrapper));

Answer 3

Ну или можно сделать так :

document.querySelector('.radiobuttons__list-item[data-example]:not([data-example=""])')
  .checked = true

<div class="radiobuttons__list">
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
  <input class="radiobuttons__list-item" type="radio" name="radio" checked>
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

ПС: ответ дан просто для разнообразия :)

БЛОГ НА HUSL

Найти первый подходящий элемент массива

Ответы (3 шт):