javascript - find closest class - Stack Overflow

admin管理员组

文章数量:1279090

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!

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!

• javascript
• jquery
• closest

Share Improve this question Follow asked Feb 22, 2012 at 21:56 Leon van der VeenLeon van der Veen 1,6721212 gold badges4242 silver badges6262 bronze badges 2

• um you cannot click it "display:none;" on the div makes it hidden - and NO markup has a class='optionValue' – Mark Schultheiss Commented Feb 22, 2012 at 22:00
• @Mark <span class="optionValue">?? – elclanrs Commented Feb 22, 2012 at 22:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

//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/rpVxV/

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); }

本文标签： javascriptfind closest classStack Overflow