jQuery在div中选择视频并将其静音

Question

I'm trying to mute some videos when a specific button is pressed with jquery.

i have this html code

<button id="mute">Mute all</button>
<button id="unmute">Unmute all</button>

<div id="displayer"></div>

The thing is, at some point, my displayer will by filled like this:

<div id="displayer">
    <div id="row0" class="row">
        <div class="col-md-2">
            <video  id="recorded0" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded1" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded2" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded3" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video  id="recorded4" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded5" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
    </div>
    <div id="row1" class="row">
        <div class="col-md-2">
            <video id="recorded6" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded7" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
        <div class="col-md-2">
            <video id="recorded8" autoplay="" loop="" src="some_video" controls=""></video>
        </div>
    </div>
</div>

here's my javascript code :

$("#mute").click(function() {
  $("#displayer > video").prop('muted', true);
});

$("#unmute").click(function() {
  $("#displayer > video").prop('muted', false);
});

and it doesn't work. I don't see why. Can someone help me ?

Answer 1

$("#displayer" > video") means get all the video elements that are immediate children of #displayer. The only immediate children of #displayer are your div rows.

Try this instead:

$("#displayer video")