通过jQuery直接定位下一个元素

Question

Please help me to target DIRECTLY the next <section> after the element <section class="active">

Here is code.

    <main>
        <section id="video" class="active">
            <video src="1.mp4" autoplay loop></video>
        </section>
        <section id="video">
            <video src="2.mp4" muted autoplay loop></video>
        </section>
        <section id="video">
            <video src="3.mp4" muted autoplay loop></video>
        </section>
    </main> 

I've tried this one

`$(this).next().find($("video").prop('muted', false));`

and this one

`$(this).closest().find($("video").prop('muted', false));`

but both of them takes all <section> s and makes their videos unmuted.

I just want to unmute directly the next section's video which has class .active.

Answer 1

You're chaining your calls slightly wrong. Try:

 $(this).next().find('video').prop('muted', false);

To explain:

.next() -> (Returns the immediate sibling element) -> find('video') (Returns the 'video' element contained in this sibling) and finally -> .prop() (set the property value)

'Find' takes a selector as an argument, rather than a jquery object.

Also, it's bad to have multiple elements with the same 'ID' on a page. If you need to apply common styles, consider using classes instead.