barryedmund
barryedmund

Reputation: 612

Get next element that is not necessarily a sibling & no class

Using jQuery, how do I find the first occurring element of a certain type after a given element ID? The desired element may or may not be the element immediately after.

The aim of the function below is to hide the first occurring element of type 'select' after the radio button.

function showDropDown(radioButtonElem) {
    if(document.getElementById(radioButtonElem.id).checked) {
        /*$(Get next <select> element after radioButtonElem.id).css("display", "none");*/
    }
}

<input type="radio" name="radioButtonGroup" value="sfn" id="sfn" onclick="showDropDown(this);">
<select id="myDropDown">...</select>

My understanding of the 'next()' function is that it only finds elements of the same type. I may be wrong; if I am please explain how to use it to solve my problem.

EDIT: Thanks for feedback all. Based on your input, I thought this would work, but it doesn't. What am I missing?

<script>
  function showDropDown(radioButtonElem)
    {
      if(radioButtonElem.checked)
    {
      $(radioButtonElem).nextAll('select').first().css('display', 'none');
    }
  }
</script>

Upvotes: 2

Views: 2471

Answers (2)

user1644502
user1644502

Reputation:

Try this or use below

var getNextTD = $('table.listview').nextAll('td').not('[class]').first();

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

If the required element is a sibling, just not necessarily the immediately following sibling, you can use .nextAll() followed by .first()

$(this).nextAll('select').first()

Also - you have jQuery - you should use it for the event handling too:

function showDropDown(ev) {
    if (this.checked) {
        $(this).nextAll('select').first().hide();
    }
}

$(':radio').on('click', showDropDown);

See http://jsfiddle.net/alnitak/RsrwV/

Upvotes: 1

Related Questions