How to get text from a non-matching sibling?

Question

I am creating an A/B test variant using VWO. The website has a list with checkboxes laid out like so;

<ol>
    <li>
        <label>
            <input class="checkBox" type="checkbox">
            <p class="checkBoxAnc">Text to grab</p>
        </label>
    </li>
</ol>

There is an apply button, when this is clicked I want it to cycle through all of the inputs. If checked is true then I need to grab the text from the class "checkBoxAnc" (p element) and concatenate it to a variable.

I have tried the following:

var self= $(this);
//This is referring to the input that the user has clicked, so class '.checkBox'

self.next() // This doesn't work as element's do not match

self.nextUntil('.checkBoxAnc') // Same issue as .next()

var checkBoxSibling = self.parent().find('.checkBoxAnc').text();
// This returns an empty string

When trying to find the parent type this is being returned as 'undefined' rather than 'label'

Are there any other techniques to access '.checkBoxAnc'?

[Works for me](https://jsfiddle.net/tu4tv5kq/). If you're having an issue, you need to provide a *complete yet minimal* demonstration that actually represents the issue. — , Aug 05 '16 at 14:46
Works here as expected using `next()` - https://jsfiddle.net/9vfyez40/ - try giving us a [mcve] — Jamiec, Aug 05 '16 at 14:47

cmac · Answer 1 · 2016-08-05T15:30:01.667

0

Something like this...

var foo = '';

$('input[type=checkbox]:checked').map(function() {
    foo += $(this).next().text(); // value your looking for
}).get();

https://jsfiddle.net/cmac_/8w7vghbt/

edited Aug 05 '16 at 15:30

answered Aug 05 '16 at 14:50

cmac

3,123
6
36
49

A `p` element has no value – A. Wolff Aug 05 '16 at 14:50
I think you might want `$("input[type=checkbox]:checked")`, I don't think your current selector will work. – DBS Aug 05 '16 at 15:13
@DBS It works, checkout the fiddle. But yours is more widely used, so I'm gonna switch it. – cmac Aug 05 '16 at 15:27
1

Huh, indeed it does. I didn't realise you could stack up multiple `:` property selectors. – DBS Aug 05 '16 at 15:34

How to get text from a non-matching sibling?

1 Answers1