Find next img element using known element id javascript/jquery
Question
I have a form that has several dropdowns. When a user selects the dropdown, there is an onchange event that should update an image. I'm having trouble locating the image. I know the select element id that is before the img tag but I don't know how to get the img id.
So, when there is a change to one of the dropdowns, the img_c-cup# (where # is a number) should change based on the selection.
Here's the javascript for the change:
<script>
jQuery.noConflict();
(function($){
$("select").change(function(){
var j = this.value;
var amanda = $(this).closest(':has(img)').find('img').attr('id');
console.log("AMANDA: "+amanda);
imgflavor = j;
var res1 = imgflavor.substring(0, imgflavor.indexOf("|"));
var res2 = res1.replace("%", "");
var res3 = res2.replace(" ", "_");
var res = res3.toLowerCase();
imgflavor = res;
img_ccup = amanda;
if ( imgflavor == "0")
{
$('#'+img_ccup).attr('src',"https://www.X.com/lids/no_lid.png");
}
else
{
$('#'+img_ccup).attr('src',"https://www.X.com/lids/" + imgflavor + "_150x150.png");
}
});
})(jQuery);
</script>
Here's the form code:
<form method='post' enctype='multipart/form-data' id='gform_3' action='/?gf_page=preview&id=3'>
<div class='gform_heading'>
<h3 class='gform_title'>concof test single</h3>
<span class='gform_description'></span>
</div>
<div class='gform_body'>
<ul id='gform_fields_3' class='gform_fields top_label form_sublabel_below description_below'>
<li id='field_3_1' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' >
<h2 class='gsection_title'>C-Cup #1</h2>
</li>
<li id='field_3_2' class='gfield gfield_price gfield_price_3_2 gfield_product_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_2' >Flavor 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_2' id='input_3_2' class='medium gfield_select' tabindex='1' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_3' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_3' >Grams 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_3' id='input_3_3' class='medium gfield_select' tabindex='2' aria-required="true" aria-invalid="false">
<option value='7 Grams|0.7' >7 Grams</option>
<option value='8 Grams|0.8' >8 Grams</option>
<option value='9 Grams|0.9' >9 Grams</option>
<option value='10 Grams|1' selected='selected'>10 Grams</option>
<option value='11 Grams|1.1' >11 Grams</option>
<option value='12 Grams|1.2' >12 Grams</option>
</select>
</div>
</li>
<li id='field_3_4' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' >
<img id="img_c-cup1" src="https://www.XXXX.com/lids/no_lid.png">
</li>
<li id='field_3_6' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' >
<h2 class='gsection_title'>C-Cup #2</h2>
</li>
<li id='field_3_5' class='gfield gfield_price gfield_price_3_5 gfield_product_3_5 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_5' >Product Name<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_5' id='input_3_5' class='medium gfield_select' tabindex='3' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_7' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 field_sublabel_below field_description_below gfield_visibility_' >
<label class='gfield_label' for='input_3_7' >Option</label>
<div class='ginput_container ginput_container_select'>
<select name='input_7' id='input_3_7' class='medium gfield_select' tabindex='4' aria-invalid="false">
<option value='First Option|0' >First Option</option>
<option value='Second Option|0' >Second Option</option>
<option value='Third Option|0' >Third Option</option>
</select>
</div>
</li>
<li id='field_3_8' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' >
<img id="img_c-cup2" src="https://www.XXXX.com/lids/no_lid.png">
</li>
</ul>
</div>
<div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_3' class='gform_button button' value='Submit' tabindex='5' onclick='if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; jQuery("#gform_3").trigger("submit",[true]); }' />
<input type='hidden' class='gform_hidden' name='is_submit_3' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='3' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
<input type='hidden' class='gform_hidden' name='state_3' value='WyJ7XCIyXCI6W1wiNTc1MTM5NGQzMThjYzk0MDAyOWMzNDE2MjU4' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_3' id='gform_target_page_number_3' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_3' id='gform_source_page_number_3' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
3 answers
solution1
0 2018-01-12 23:24:10
You can screw around with the splits and regex until you get it right, but I wouldn't do it that way. Perhaps something like:
<select id="coffee_select"></select>
...
function CoffeeType(id, name, image_src) {
this.id = id;
this.name = name;
this.image_src = image_src;
}
function CoffeeModel() {
this.coffees = [];
this.coffees.push(new CoffeeType(1, "Columbian", "columbian.jpg"));
this.coffees.push(new CoffeeType(2, "Beanies", "beanies.jpg"));
}
CoffeeModel.prototype.getCoffeeById() {
for(var i = 0; i < this.coffees.length; i++) {
var coffee = this.coffees[i];
if(coffee.id == id) {
return coffee;
}
}
return null;
}
var coffeeModel = new CoffeeModel();
var select = $("#coffee_select");
for(var i = 0; i < coffeeModel.coffees.length; i++) {
var coffee = coffeeModel.coffees[i];
var option = $("<option>");
option.val(coffee.id);
option.text(coffee.name);
select.append(option);
}
select.off("change");
select.on("change", function() {
var coffee = getCoffeeById($(this).val());
if(coffee) {
$("#coffee_image").src("attr", coffee.image_src);
}
});
solution2
0 ACCPTED 2018-01-12 23:31:49
Slight change to your jquery code to look at the following sibling li elements to find the first one with an img.
jQuery.noConflict(); (function($) { $("select").change(function() { var j = this.value; var amanda; var li = $( this ).closest( 'li' ); while ( li.next('li') != null ) { li = li.next('li'); console.log( li.attr('id') ); if ( li.find( 'img' ).length ) { amanda = li.find( 'img' ).attr( 'id' ); break; } } console.log("AMANDA: " + amanda); imgflavor = j; var res1 = imgflavor.substring(0, imgflavor.indexOf("|")); var res2 = res1.replace("%", ""); var res3 = res2.replace(" ", "_"); var res = res3.toLowerCase(); imgflavor = res; img_ccup = amanda; if (imgflavor == "0") { $('#' + img_ccup).attr('src', "https://www.X.com/lids/no_lid.png"); } else { $('#' + img_ccup).attr('src', "https://www.X.com/lids/" + imgflavor + "_150x150.png"); } }); })(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method='post' enctype='multipart/form-data' id='gform_3' action='/?gf_page=preview&id=3'> <div class='gform_heading'> <h3 class='gform_title'>concof test single</h3> <span class='gform_description'></span> </div> <div class='gform_body'> <ul id='gform_fields_3' class='gform_fields top_label form_sublabel_below description_below'> <li id='field_3_1' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'> <h2 class='gsection_title'>C-Cup #1</h2> </li> <li id='field_3_2' class='gfield gfield_price gfield_price_3_2 gfield_product_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'> <label class='gfield_label' for='input_3_2'>Flavor 1<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_2' id='input_3_2' class='medium gfield_select' tabindex='1' aria-required="true" aria-invalid="false"> <option value='0|0' >Select a Flavor</option> <option value='100 columbian|0' >100% Columbian</option> <option value='beanies blend|0' >Beanies Blend</option> <option value='butterscotch|0' >Butterscotch</option> <option value='caramel|0' >Caramel</option> <option value='cinnamon|0' >Cinnamon</option> <option value='decaf|0' >Decaf</option> <option value='french vanilla|0' >French Vanilla</option> <option value='green tea|0' >Green Tea</option> <option value='hazelnut|0' >Hazelnut</option> <option value='hot chocolate|0' >Hot Chocolate</option> <option value='light roast|0' >Light Roast</option> <option value='medium roast|0' >Medium Roast</option> <option value='red velvet|0' >Red Velvet</option> <option value='seasonal roast|0' >Seasonal Roast</option> <option value='texas maple pecan|0' >Texas Maple Pecan</option> </select> </div> </li> <li id='field_3_3' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'> <label class='gfield_label' for='input_3_3'>Grams 1<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_3' id='input_3_3' class='medium gfield_select' tabindex='2' aria-required="true" aria-invalid="false"> <option value='7 Grams|0.7' >7 Grams</option> <option value='8 Grams|0.8' >8 Grams</option> <option value='9 Grams|0.9' >9 Grams</option> <option value='10 Grams|1' selected='selected'>10 Grams</option> <option value='11 Grams|1.1' >11 Grams</option> <option value='12 Grams|1.2' >12 Grams</option> </select> </div> </li> <li id='field_3_4' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'> <img id="img_c-cup1" src="https://www.XXXX.com/lids/no_lid.png"> </li> <li id='field_3_6' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'> <h2 class='gsection_title'>C-Cup #2</h2> </li> <li id='field_3_5' class='gfield gfield_price gfield_price_3_5 gfield_product_3_5 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'> <label class='gfield_label' for='input_3_5'>Product Name<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_5' id='input_3_5' class='medium gfield_select' tabindex='3' aria-required="true" aria-invalid="false"> <option value='0|0' >Select a Flavor</option> <option value='100 columbian|0' >100% Columbian</option> <option value='beanies blend|0' >Beanies Blend</option> <option value='butterscotch|0' >Butterscotch</option> <option value='caramel|0' >Caramel</option> <option value='cinnamon|0' >Cinnamon</option> <option value='decaf|0' >Decaf</option> <option value='french vanilla|0' >French Vanilla</option> <option value='green tea|0' >Green Tea</option> <option value='hazelnut|0' >Hazelnut</option> <option value='hot chocolate|0' >Hot Chocolate</option> <option value='light roast|0' >Light Roast</option> <option value='medium roast|0' >Medium Roast</option> <option value='red velvet|0' >Red Velvet</option> <option value='seasonal roast|0' >Seasonal Roast</option> <option value='texas maple pecan|0' >Texas Maple Pecan</option> </select> </div> </li> <li id='field_3_7' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 field_sublabel_below field_description_below gfield_visibility_'> <label class='gfield_label' for='input_3_7'>Option</label> <div class='ginput_container ginput_container_select'> <select name='input_7' id='input_3_7' class='medium gfield_select' tabindex='4' aria-invalid="false"> <option value='First Option|0' >First Option</option> <option value='Second Option|0' >Second Option</option> <option value='Third Option|0' >Third Option</option> </select> </div> </li> <li id='field_3_8' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'> <img id="img_c-cup2" src="https://www.XXXX.com/lids/no_lid.png"> </li> </ul> </div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_3' class='gform_button button' value='Submit' tabindex='5' onclick='if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; jQuery("#gform_3").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_3' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='3' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_3' value='WyJ7XCIyXCI6W1wiNTc1MTM5NGQzMThjYzk0MDAyOWMzNDE2MjU4' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_3' id='gform_target_page_number_3' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_3' id='gform_source_page_number_3' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form>
solution3
0 2018-01-12 23:38:40
Use $(this).closest('li').nextAll().find('img').first().attr('id'); to get your id. (The first() is maybe not strictly necessary)
Finds the closest li ancestor then finds the set of all img elements that appear after that li and gets the id from the first element in the result set.
There are maybe better ways of doing this. Applying a class to your img elements and adding a data attribute with a value that matched your select would probably one way of doing it.... So you could do something more like $('.img_ccup[data-from="input_#"])') ... <img class="img_ccup" data-from="input_#" ...>
jQuery.noConflict(); (function($){ $("select").change(function(){ var j = this.value; var amanda = $(this).closest('li').nextAll().find('img').first().attr('id'); console.log("AMANDA: "+amanda); imgflavor = j; var res1 = imgflavor.substring(0, imgflavor.indexOf("|")); var res2 = res1.replace("%", ""); var res3 = res2.replace(" ", "_"); var res = res3.toLowerCase(); imgflavor = res; img_ccup = amanda; if ( imgflavor == "0") { $('#'+img_ccup).attr('src',"https://www.X.com/lids/no_lid.png"); } else { $('#'+img_ccup).attr('src',"https://www.X.com/lids/" + imgflavor + "_150x150.png"); } }); })(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method='post' enctype='multipart/form-data' id='gform_3' action='/?gf_page=preview&id=3'> <div class='gform_heading'> <h3 class='gform_title'>concof test single</h3> <span class='gform_description'></span> </div> <div class='gform_body'> <ul id='gform_fields_3' class='gform_fields top_label form_sublabel_below description_below'> <li id='field_3_1' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' > <h2 class='gsection_title'>C-Cup #1</h2> </li> <li id='field_3_2' class='gfield gfield_price gfield_price_3_2 gfield_product_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' > <label class='gfield_label' for='input_3_2' >Flavor 1<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_2' id='input_3_2' class='medium gfield_select' tabindex='1' aria-required="true" aria-invalid="false"> <option value='0|0' >Select a Flavor</option> <option value='100 columbian|0' >100% Columbian</option> <option value='beanies blend|0' >Beanies Blend</option> <option value='butterscotch|0' >Butterscotch</option> <option value='caramel|0' >Caramel</option> <option value='cinnamon|0' >Cinnamon</option> <option value='decaf|0' >Decaf</option> <option value='french vanilla|0' >French Vanilla</option> <option value='green tea|0' >Green Tea</option> <option value='hazelnut|0' >Hazelnut</option> <option value='hot chocolate|0' >Hot Chocolate</option> <option value='light roast|0' >Light Roast</option> <option value='medium roast|0' >Medium Roast</option> <option value='red velvet|0' >Red Velvet</option> <option value='seasonal roast|0' >Seasonal Roast</option> <option value='texas maple pecan|0' >Texas Maple Pecan</option> </select> </div> </li> <li id='field_3_3' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' > <label class='gfield_label' for='input_3_3' >Grams 1<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_3' id='input_3_3' class='medium gfield_select' tabindex='2' aria-required="true" aria-invalid="false"> <option value='7 Grams|0.7' >7 Grams</option> <option value='8 Grams|0.8' >8 Grams</option> <option value='9 Grams|0.9' >9 Grams</option> <option value='10 Grams|1' selected='selected'>10 Grams</option> <option value='11 Grams|1.1' >11 Grams</option> <option value='12 Grams|1.2' >12 Grams</option> </select> </div> </li> <li id='field_3_4' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' > <img id="img_c-cup1" src="https://www.XXXX.com/lids/no_lid.png"> </li> <li id='field_3_6' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' > <h2 class='gsection_title'>C-Cup #2</h2> </li> <li id='field_3_5' class='gfield gfield_price gfield_price_3_5 gfield_product_3_5 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' > <label class='gfield_label' for='input_3_5' >Product Name<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_select'> <select name='input_5' id='input_3_5' class='medium gfield_select' tabindex='3' aria-required="true" aria-invalid="false"> <option value='0|0' >Select a Flavor</option> <option value='100 columbian|0' >100% Columbian</option> <option value='beanies blend|0' >Beanies Blend</option> <option value='butterscotch|0' >Butterscotch</option> <option value='caramel|0' >Caramel</option> <option value='cinnamon|0' >Cinnamon</option> <option value='decaf|0' >Decaf</option> <option value='french vanilla|0' >French Vanilla</option> <option value='green tea|0' >Green Tea</option> <option value='hazelnut|0' >Hazelnut</option> <option value='hot chocolate|0' >Hot Chocolate</option> <option value='light roast|0' >Light Roast</option> <option value='medium roast|0' >Medium Roast</option> <option value='red velvet|0' >Red Velvet</option> <option value='seasonal roast|0' >Seasonal Roast</option> <option value='texas maple pecan|0' >Texas Maple Pecan</option> </select> </div> </li> <li id='field_3_7' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 field_sublabel_below field_description_below gfield_visibility_' > <label class='gfield_label' for='input_3_7' >Option</label> <div class='ginput_container ginput_container_select'> <select name='input_7' id='input_3_7' class='medium gfield_select' tabindex='4' aria-invalid="false"> <option value='First Option|0' >First Option</option> <option value='Second Option|0' >Second Option</option> <option value='Third Option|0' >Third Option</option> </select> </div> </li> <li id='field_3_8' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' > <img id="img_c-cup2" src="https://www.XXXX.com/lids/no_lid.png"> </li> </ul> </div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_3' class='gform_button button' value='Submit' tabindex='5' onclick='if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; jQuery("#gform_3").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_3' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='3' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_3' value='WyJ7XCIyXCI6W1wiNTc1MTM5NGQzMThjYzk0MDAyOWMzNDE2MjU4' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_3' id='gform_target_page_number_3' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_3' id='gform_source_page_number_3' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
find element of particular class that happens before element with known ID, in jQuery
How to find the next element which has an ID attribute using jQuery
jQuery: is $('element img') the same as $('element').find('img');
Find next element in jquery
find the id of the next element present in next div-jquery
Using Javascript within Splinter to change a value for an element of known ID
Find next input element in DIV using JQuery
find the next specific element using javascript?
get next img element of an input javascript
How to go next img element by javascript
Related Tags