Selecting input that is not a parent or child to dropdown in jquery

So I'm trying to get value of input champion that's above the dropdown with val function. Here is also whole fiddle

 function val(elm) {
            var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];

            var championName = $(elm).prev("input").find(".ChampionInput").val();


        championNumber = 1;

            '<div class="Champion" data-id="'+championNumber+'">\
                 <a href="#" class="Remove">Remove</a>\
                 <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion '+championNumber+'">\
                 <datalist id="champions"></datalist>\
                 <a href="#" class="AddSpell">Add Spell</a>\

        $('div#ChampionInput').on('click', 'a.AddSpell',function(){
            '<div class="Spell" data-id="'+$(this).children( "div.Change").length+'">\
                <select name="change['+$(this).parent('div').data('id')+'][]" onchange="val(this)">\
                   <option value="Passive">Passive</option>\
                   <option value="Q" selected>Q</option>\
                   <option value="W">W</option>\
                   <option value="E">E</option>\
                   <option value="R">R</option>\
                <input type="text" name="championSpell['+$(this).parent('div').data('id')+'][]">\
                <div class="Change">\
                <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />\
                    <select name="SpellChange['+$(this).parent('.Champion').data('id')+'][0][]">\
                       <option value="buff">Buff</option>\
                       <option value="nerf">Nerf</option>\
                       <option value="new">New</option>\
                       <option value="change">Change</option>\
                       <option value="bugfix">Bugfix</option>\
                    <a href="#" class="AddChange">Add Change </a>\
                    <a href="#" class="RemoveSpell">Remove Spell</a>\



It should be:


elm(the select) is inside div.Spell which is inside div.Champion where input.ChampionInput is placed.


Note that I have changed the location of your code in the fiddle from "OnLoad" to "Wrap in head". That is because on load event those functions var() and change() are declared the in load event scope, so the select's onchange event can't reach them.

Is there a reason why you couldn't just use the class as the selector var championName = $(".ChampionInput").val(); or add an id to the input element and select that way?

Aside from using .find() with a context I tend to use the jQuery traversal methods sparingly. Many are dependent on maintaining the same markup structure, which—in a large code base with multiple developers—can be difficult to control.

As I said, you should really clean up your code. Having that said, if you can add a class to your select, such as:

<select name="change['+$(this).parent('div').data('id')+'][]" class="change-me">\

Then you can, get the value of input.ChampionInput like below. Note that I've changed your function from val() to getVal().

function getVal() {
    var championName = $(this).closest(".Champion").find(".ChampionInput").val();

And then, within .ready():

$(document).ready(function() {

    $("#second_form").on("change", "select.change-me", getVal);

Take look at this updated fiddle.

Need Your Help

Powerpoint 2010 Multiple Instances

c# vsto powerpoint office-interop

I have seen numerous posts on this subject here, but none seem to answer this issue directly. I want to control two instances of Powerpoint running on a second monitor.

Best way to select key-value pairs randomly

java key

I'm designing a program that selects random key-pairs as long as they are below a certain threshold.