Question

我正在使用我在线购买我的票务软件的jquery脚本。它增加了向WIKI添加视频的功能。问题是它没有为视频设置高度或宽度是否可以使用此代码完成？

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls></video><br/>');
    });
}

这是html中的输出

<p>
<a border="0" class="fb_attachment" href="default.asp?pg=pgDownload&amp;pgType=pgWikiAttachment&amp;ixAttachment=136818&amp;sFileName=Paragon%20Invoice%203.mp4" rel="nofollow" title="">Paragon Invoice 3.mp4</a></p>

即使可以手动将其添加到html中。我无法在元素中添加内联css。我尝试将它包装成div但它不会采用内联样式，只是在提交时将其删除。

我可以在jquery代码中添加高度和宽度，以自动设置视频的高度和宽度。

Answer 1

这应该有效。请注意我使用max-width，但任何风格都可以。

if ($('#idEditArticle')) {
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    $.each(videos, function(i, video) {
        // Added a style attribute here.
        $(video).parent().prepend('<video src="'+$(video).attr('href')+'" controls style="max-width: 100%;"></video><br/>');
    });
}

更清晰（从编码角度来看）的方式是：

if ($('#idEditArticle')) {
    // Search for all matching elements. Returns an array of jQuery objects.
    var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
    // Simply use the array.each to iterate over the preceeding array.
    videos.each(function(){
        // now create a link, video and source element
        var link   = $(this);
        var video  = $('<video />');
        var source = $('<source />').attr('src', link.attr('href'));
        // append the element correctly to create a tree
        video.append(source);
        // Heres where you apply multiple style elements
        video.css({'max-width':'100%'});
        // prepend the tree to the desired location
        link.parent().prepend(video);
    });
}

实施工作（可能在< source />中有一个额外的空格 - 它应该是<source />：

＆＃13;

        // Search for all matching elements. Returns an array of jQuery objects.
        var videos = $('a[href$=".m4v"], a[href$=".mp4"]');
        // Simply use the array.each to iterate over the preceeding array.
        videos.each(function(){
            // now create a link, video and source element
            var link   = $(this);
            var video  = $('<video />');
            var source = $('<source />').attr('src', link.attr('href'));
            // append the element correctly to create a tree
            video.append(source);
            video.css('max-width','100%');
            // prepend the tree to the desired location
            link.parent().prepend(video);
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="test.mp4">Test</a>

＆＃13;

如何为Jquery函数添加高度和宽度

1 个答案: