How to get all children elements except one

Question

I have the following content:

<input type='checkbox' id='inputCheckbox'/><strong>sdfsf</strong><p>dfsfsdsd</p>

From the elements above, I only need to get these elements when the checkbox are selected and omit the input element:

<strong>sdfsf</strong><p>dfsfsdsd</p>

My attempt:

$("#testPatternButton").on("click", function()
{
    $("input:checked").each(function()
    {
        alert($(this).parent().children().not("input").html()); // only the strong text shows up
    });
});

`html` only returns html content of the first matched element. — Ram, Feb 01 '13 at 14:19
thanks for mentioning the first matched element, didn't know this. — Yetimwork Beyene, Feb 01 '13 at 14:23
Do you need to get the HTML string of those elements, or a collection of them you can reference? — Rory McCrossan, Feb 01 '13 at 14:23

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

This will do it -- it uses a common trick to get the .html() of the input, then uses .replace to remove that string from the parent .html().

$('input').on('click', function () {
    inputhtml = $(this).clone().wrap('<div>').parent().html();
    allhtml = $(this).parent().html();
    str = allhtml.replace(inputhtml, '');
    alert(str);
});

http://jsfiddle.net/jnabj/

If, however, you really want a jQuery object of those elements instead of the HTML string, that's even easier:

$('input').on('click',function() {
    $var = $(this).siblings();
});

edited May 23 '17 at 11:56

Community

1
1

answered Feb 01 '13 at 14:19

Blazemonger

86,267
25
136
177

Siblings is the most elegant. Interestingly enough it does not seem to take anything before the checkbox – mplungjan Feb 01 '13 at 14:34

score 1 · Accepted Answer · answered Feb 01 '13 at 14:23

1

Use each() and add up the html() contents.

$("#testPatternButton").on("click", function() {
    $("input:checked").each(function() {
        var output = '';
        $(this).parent().children().not("input").each(function() {
            output = output + $(this).html();
        });
        alert(output);
    });
});

answered Feb 01 '13 at 14:23

Antony

14,670
10
42
73

That does not show the tag though - at least not in Chrome – mplungjan Feb 01 '13 at 14:32
@mplungjan The `` tag isn't shown in the OP's original code either. What he needs is the html inside and this code does it. – Antony Feb 01 '13 at 14:33
He wanted `sdfsf
dfsfsdsd
` – mplungjan Feb 01 '13 at 14:35
@mplungjan I don't think that's what he means but if you want such an output, use `.prop('outerHTML')` instead of `.html()`. The use of `.html()` suggests that he wants plain text only. – Antony Feb 01 '13 at 14:38
ahem, then .text() would make more sense – mplungjan Feb 01 '13 at 14:42
@mplungjan Well, he can change it any way he sees fit. Let him decide it. – Antony Feb 01 '13 at 14:45

score 1 · Answer 3 · answered Feb 01 '13 at 14:31

1

Try this.

$("#inputCheckbox").click(function(){
    var el = this;
    if (el.checked) {
        console.log(
            $(el).nextAll()
        );
    }
});

answered Feb 01 '13 at 14:31

score 0 · Answer 4 · answered Feb 01 '13 at 14:30

0

This works

DEMO

$("#testPatternButton").on("click", function() {
    $("input:checked").each(function() {
      $("#out").html($(this).parent().contents().not('input')); 
    });
});

answered Feb 01 '13 at 14:30

mplungjan

155,085
27
166
222

How to get all children elements except one

4 Answers4