find closest class
12,361
Solution 1
//select all the `<li>` elements that are the children of the `<ul>` element that is the child of the `.options_list` element
$(".option_list").children('ul').children().click(function() {
//select the first ancestor element with the `.table_settings` class,
//then select the `.optionValue` element that is a descendant of the `.table_settings` element,
//then set it's text to that of the input element inside the `<li>` element clicked
$(this).closest('.table_settings').find('.optionValue').text($(this).children().val());
});
Here is a demo: http://jsfiddle.net/rpVxV/
Solution 2
Try this:
$('.option_list')
.find('li')
.click(function () {
var $radio = $(this).children(':radio'),
value = $radio.attr('alt'), // Or `$(this).text()` ...
$(this)
.parents('.table_settings')
.find('.optionValue')
.text(value);
});
Your code is basically not working because of this line:
//`.optionValue` is not IMMEDIATE
// children of `.table_settings`
// so it won't work
$(this).parents('.table_settings').children('.optionValue').text(value); }
Author by
Leon van der Veen
Updated on July 14, 2022Comments
-
Leon van der Veen almost 2 years
I want to find a closest class of the given object. My markup looks like this:
<div class="table_settings"> <div style="float:left;"> <div class="stats_options" id="yearSelector" style="width:140px;"> <div style="float:left"><span class="optionValue"></span></div> <div style="float:right; margin-top:11px;"><img src="../images/arrow_down.png" /></div> <div class="clear"></div> </div> <div id="yearSelectorOptions" class="option_list" style="width:160px; display:none; margin-top:0px;"> <ul> <li><input type="radio" name="year" value="2" style="display:none;" alt="Winst en verlies" checked="checked" />Winst en verlies</li> <li><input type="radio" name="year" value="1" style="display:none;" alt="Eindbalans" />Eindbalans</li> </ul> </div> </div></div>
The jquery looks like this:
$(".option_list ul li").click(function() { $(this).children('form input[type="radio"]').prop('checked', true); value = $(this).children('input[type="radio"]:checked').attr('alt'); $(this).parents('.table_settings').children('.optionValue').text(value); }
What I want is when I click on the [li] that the value of the clicked [li] gets into the class optionValue.
I want to duplicate this list so it have to work for more lists on one page.
I hope someone can help me.
Thanks in advance!