使用.text（）抓取父文本

Question

I am having trouble getting the text 'Vegetable' from the DOM

   <div class="input-group">
    <ul>
        <li>
            <span class="input-checkbox">
                <input type="checkbox" aria-label="...">
            </span>
            Vegetable
        </li>
     </ul>
    </div>

Currently, I have an event handler for when I check the box to grab the text of the element of the list, but what I am doing is not working: $(e.target).parent().text() . My thinking was that I am targeting "input-checkbox" , so i need to get the parent and then grab the text of it. Is that the right approach or is it something wrong with my jQuery?

Events Code:

Template.produceList.events({
    'click .input-checkbox': function(e) {
        e.preventDefault();
        console.log('clicked on filter');
        var text = $(e.target).parent().text();
        return;
    }
});

Answer 1

You need to go two levels up because "input" is inside "span" which is inside "li", and the text "Vegetable" is inside "li".

$(e.target).parent().parent().text()

I have created an example here (it's a little modified form of your code): https://jsfiddle.net/x5yb2m30/

Another way to do this would be to use parents() and look for li tag:

$(e.target).parents("li").text()

Answer 2

With jQuery this is the element the event is registered against, the target is the DOM node that acted on the event. In this case, the event.target is the input field itself.

// this will give you the expected container 
// regardless of the child element the target belongs to
$(event.target).closest('li');

As an aside, I suggest the following structure for checkboxes and radio buttons.

<label>
  <input type="checkbox" ... />
  <span>Text Goes Here</span>
</label>

This way, the label itself will target the input for clicking... beyond this, you can use an adjacent sibling selector to override display behavior if you're using a graphical font like fontawesome for checkboxes

label + input[type=checkbox] { display:none }
label > input[type=checkbox] + span:before { 
  /*setup for glyph font character*/
  font-family: 'FontAwesome';
  content: "\f096"; //square-o
  color:#000;
}
label > input[type=checkbox]:checked + span:before {
  content: "\f046"; //check-square-o 
}
label > input[type=checkbox]:disabled + span:before {
  color:#888;
}

Also, I would suggest using data- attributes on your selected container for whatever data you need access to, don't rely on the text itself. Either have values and/or data on the input elements themselves, or the appropriate container.

ex:

<label data-category="foo">
    <input id="chkFoo" type="checkbox" value="bar" />
    <span>Foo</span>
</label>

You can access data via. $('#chkFoo').val() or $('#chkFoo').parent().data('category') which is easier to reason with, and can remain consistent regardless of display text, which may be localized in a given application.