隐藏类中的第二个元素 [英] Hide the second element within a class
本文介绍了隐藏类中的第二个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<span class="fileactions">
<a href="#" class="action" data-action="Download" original-title="">
<img class="svg" src="/login/owncloud/core/img/actions/download.svg"> Download
</a>
<a href="#" class="action" data-action="Share" original-title="">
<img class="svg" src="/login/owncloud/core/img/actions/share.svg"> Share
</a>
</span>
类文件action包含两个链接元素。我想要删除第二个。
The class fileactions contains 2 link elements. I want the 2nd one to be removed.
我已尝试使用这个：
.fileactions a:nth-child(2) {
display:none;
}
.fileactions [data-action="Share"] {
display: none;
}
，这些都无效。
我使用owncloud，并希望在以用户身份登录时隐藏共享文件的选项。
I am using owncloud and want to hide the option to share files when logged in as a user.
这里是 PAGE SOURCE
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ng-csp ie ie6 lte9 lte8 lte7"><![endif]-->
<!--[if IE 7]><html class="ng-csp ie ie7 lte9 lte8 lte7"><![endif]-->
<!--[if IE 8]><html class="ng-csp ie ie8 lte9 lte8"><![endif]-->
<!--[if IE 9]><html class="ng-csp ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><html class="ng-csp ie"><![endif]-->
<!--[if !IE]><!--><html class="ng-csp"><!--<![endif]-->
<head data-user="jhinton@lpc.com" data-requesttoken="80b052824521ca02c51b">
<title>
Files | ownCloud (jhinton@lpc.com) </title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-itunes-app" content="app-id=543672169">
<style>
#content #controls{
display:none;
}
.fileactions > a[data-action="Share"] {
display:none; !important;
}
</style>
<link rel="shortcut icon" href="/login/owncloud/core/img/favicon.png" />
<link rel="apple-touch-icon-precomposed" href="/login/owncloud/core/img/favicon-touch.png" />
<link rel="stylesheet" href="/login/owncloud/remote.php/core.css?v=e36258b3c74f08054a974a5fe1703f9c" type="text/css" media="screen" />
<link rel="stylesheet" href="/login/owncloud/index.php/apps/files/css/files.css?v=e36258b3c74f08054a974a5fe1703f9c" type="text/css" media="screen" />
<script type="text/javascript" src="/login/owncloud/index.php/core/js/config.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/remote.php/core.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/file-upload.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/jquery.iframe-transport.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/jquery.fileupload.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/jquery-visibility.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/filelist.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/fileactions.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/files.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
<script type="text/javascript" src="/login/owncloud/apps/files/js/keyboardshortcuts.js?v=e36258b3c74f08054a974a5fe1703f9c"></script>
</head>
<body id="body-user">
<div id="notification-container">
<div id="notification"></div>
</div>
<header><div id="header">
<a href="/login/owncloud/index.php" title="" id="owncloud"><img class="svg"
src="/login/owncloud/core/img/logo-wide.svg" alt="ownCloud" /></a>
<div id="logo-claim" style="display:none;"></div>
<ul id="settings" class="svg">
<span id="expand">
<span id="expandDisplayName">jhinton@lpc.com</span>
<img class="svg" src="/login/owncloud/core/img/actions/caret.svg" />
</span>
<div id="expanddiv">
<li>
<a href="/login/owncloud/index.php/settings/personal" title=""
>
<img class="svg" alt="" src="/login/owncloud/settings/img/personal.svg">
Profile </a>
</li>
<li>
<a id="logout" href="/login/owncloud/index.php?logout=true">
<img class="svg" alt="" src="/login/owncloud/core/img/actions/logout.svg" />
Log out </a>
</li>
</div>
</ul>
<form class="searchbox" action="#" method="post">
<span style="color:white; position:absolute; right:40%; padding-top:8px; font-weight:bold; font-size:16px;">Green Cleaning Monthly Reports - TQ to You</span><input id="searchbox" class="svg" type="search" name="query"
value=""
autocomplete="off" x-webkit-speech />
</form>
</div></header>
<nav><div id="navigation">
<ul id="apps" class="svg">
<li data-id="files_index">
<a href="/login/owncloud/index.php/apps/files" title=""
class="active">
<img class="icon svg" src="/login/owncloud/core/img/places/files.svg"/>
<span>
Files </span>
</a>
</li>
</ul>
</div></nav>
<div id="content-wrapper">
<div id="content">
<!--[if IE 8]><style>input[type="checkbox"]{padding:0;}table td{position:static !important;}</style><![endif]-->
<div id="controls" >
<div class="crumb" data-dir=''>
<a href="/login/owncloud/index.php/apps/files?dir=">
<img src="/login/owncloud/core/img/places/home.svg" class="svg" />
</a>
</div>
<div class="crumb last svg"
data-dir='/Shared'>
<a href="/login/owncloud/index.php/apps/files?dir=/Shared">Shared</a>
</div>
<div class="actions"><input type="button" disabled value="You don’t have write permissions here."></div>
<input type="hidden" name="dir" value="/Shared" id="dir">
<input type="hidden" name="permissions" value="9" id="permissions">
</div>
<table id="filestable" data-allow-public-upload="yes">
<thead>
<tr>
<th id='headerName'>
<input type="checkbox" id="select_all" />
<span class='name'>Name</span>
<span class='selectedActions'>
<a href="" class="download">
<img class="svg" alt="Download"
src="/login/owncloud/core/img/actions/download.svg" />
Download </a>
</span>
</th>
<th id="headerSize">Size</th>
<th id="headerDate">
<span id="modified">Modified</span>
<!-- NOTE: Temporary fix to allow unsharing of files in root of Shared folder -->
<span class="selectedActions"><a href="" class="delete-selected">
Unshare <img class="svg" alt="Unshare"
src="/login/owncloud/core/img/actions/delete.svg" />
</a></span>
</th>
</tr>
</thead>
<tbody id="fileList">
<input type="hidden" id="disableSharing" data-status="">
<tr data-id="120"
data-file="CD1029%201775%20I%20Street%20NE"
data-type="dir"
data-mime="httpd/unix-directory"
data-size='6318729'
data-permissions='17'>
<td class="filename svg"
style="background-image:url(/login/owncloud/core/img/filetypes/folder.png)"
>
<input type="checkbox" /> <a class="name" href="/login/owncloud/index.php/apps/files?dir=/Shared/CD1029%201775%20I%20Street%20NE" title="">
<span class="nametext">
CD1029 1775 I Street NE </span>
<span class="uploadtext" currentUploads="0">
</span>
</a>
</td>
<td class="filesize"
title="6 MB"
style="color:rgb(187,187,187)">
6.0 </td>
<td class="date">
<span class="modified"
title="December 3, 2013 09:23"
style="color:rgb(17,17,17)">
yesterday </span>
</td>
</tr>
<tr data-id="121"
data-file="CD1037%201015%2015th%20Street%20NW"
data-type="dir"
data-mime="httpd/unix-directory"
data-size='7704440'
data-permissions='17'>
<td class="filename svg"
style="background-image:url(/login/owncloud/core/img/filetypes/folder.png)"
>
<input type="checkbox" /> <a class="name" href="/login/owncloud/index.php/apps/files?dir=/Shared/CD1037%201015%2015th%20Street%20NW" title="">
<span class="nametext">
CD1037 1015 15th Street NW </span>
<span class="uploadtext" currentUploads="0">
</span>
</a>
</td>
<td class="filesize"
title="7.3 MB"
style="color:rgb(185,185,185)">
7.3 </td>
<td class="date">
<span class="modified"
title="November 15, 2013 10:04"
style="color:rgb(200,200,200)">
19 days ago </span>
</td>
</tr>
<tr data-id="156"
data-file="CD1113%202030%20M%20St"
data-type="dir"
data-mime="httpd/unix-directory"
data-size='6395172'
data-permissions='17'>
<td class="filename svg"
style="background-image:url(/login/owncloud/core/img/filetypes/folder.png)"
>
<input type="checkbox" /> <a class="name" href="/login/owncloud/index.php/apps/files?dir=/Shared/CD1113%202030%20M%20St" title="">
<span class="nametext">
CD1113 2030 M St </span>
<span class="uploadtext" currentUploads="0">
</span>
</a>
</td>
<td class="filesize"
title="6.1 MB"
style="color:rgb(187,187,187)">
6.1 </td>
<td class="date">
<span class="modified"
title="November 22, 2013 13:05"
style="color:rgb(169,169,169)">
12 days ago </span>
</td>
</tr>
<tr data-id="157"
data-file="CD1114%201724%20Mass%20Ave"
data-type="dir"
data-mime="httpd/unix-directory"
data-size='6906485'
data-permissions='17'>
<td class="filename svg"
style="background-image:url(/login/owncloud/core/img/filetypes/folder.png)"
>
<input type="checkbox" /> <a class="name" href="/login/owncloud/index.php/apps/files?dir=/Shared/CD1114%201724%20Mass%20Ave" title="">
<span class="nametext">
CD1114 1724 Mass Ave </span>
<span class="uploadtext" currentUploads="0">
</span>
</a>
</td>
<td class="filesize"
title="6.6 MB"
style="color:rgb(186,186,186)">
6.6 </td>
<td class="date">
<span class="modified"
title="November 22, 2013 13:35"
style="color:rgb(168,168,168)">
12 days ago </span>
</td>
</tr>
<tr data-id="122"
data-file="CV1028%203434%20Washington%20Blvd"
data-type="dir"
data-mime="httpd/unix-directory"
data-size='8281090'
data-permissions='17'>
<td class="filename svg"
style="background-image:url(/login/owncloud/core/img/filetypes/folder.png)"
>
<input type="checkbox" /> <a class="name" href="/login/owncloud/index.php/apps/files?dir=/Shared/CV1028%203434%20Washington%20Blvd" title="">
<span class="nametext">
CV1028 3434 Washington Blvd </span>
<span class="uploadtext" currentUploads="0">
</span>
</a>
</td>
<td class="filesize"
title="7.9 MB"
style="color:rgb(184,184,184)">
7.9 </td>
<td class="date">
<span class="modified"
title="November 14, 2013 09:28"
style="color:rgb(200,200,200)">
20 days ago </span>
</td>
</tr>
</tbody>
</table>
<div id="editor"></div>
<div id="uploadsize-message" title="Upload too large">
<p>
The files you are trying to upload exceed the maximum size for file uploads on this server. </p>
</div>
<div id="scanning-message">
<h3>
Files are being scanned, please wait. <span id='scan-count'></span>
</h3>
<p>
Current scanning <span id='scan-current'></span>
</p>
</div>
<!-- config hints for javascript -->
<input type="hidden" name="allowZipDownload" id="allowZipDownload" value="1" />
<input type="hidden" name="usedSpacePercent" id="usedSpacePercent" value="0" />
</div>
</div>
</body>
</html>
这里是 javascript 打败事情
var FileActions = {
actions: {},
defaults: {},
icons: {},
currentFile: null,
register: function (mime, name, permissions, icon, action) {
if (!FileActions.actions[mime]) {
FileActions.actions[mime] = {};
}
if (!FileActions.actions[mime][name]) {
FileActions.actions[mime][name] = {};
}
FileActions.actions[mime][name]['action'] = action;
FileActions.actions[mime][name]['permissions'] = permissions;
FileActions.icons[name] = icon;
},
setDefault: function (mime, name) {
FileActions.defaults[mime] = name;
},
get: function (mime, type, permissions) {
var actions = {};
if (FileActions.actions.all) {
actions = $.extend(actions, FileActions.actions.all);
}
if (type) {//type is 'dir' or 'file'
if (FileActions.actions[type]) {
actions = $.extend(actions, FileActions.actions[type]);
}
}
if (mime) {
var mimePart = mime.substr(0, mime.indexOf('/'));
if (FileActions.actions[mimePart]) {
actions = $.extend(actions, FileActions.actions[mimePart]);
}
if (FileActions.actions[mime]) {
actions = $.extend(actions, FileActions.actions[mime]);
}
}
var filteredActions = {};
$.each(actions, function (name, action) {
if (action.permissions & permissions) {
filteredActions[name] = action.action;
}
});
return filteredActions;
},
getDefault: function (mime, type, permissions) {
if (mime) {
var mimePart = mime.substr(0, mime.indexOf('/'));
}
var name = false;
if (mime && FileActions.defaults[mime]) {
name = FileActions.defaults[mime];
} else if (mime && FileActions.defaults[mimePart]) {
name = FileActions.defaults[mimePart];
} else if (type && FileActions.defaults[type]) {
name = FileActions.defaults[type];
} else {
name = FileActions.defaults.all;
}
var actions = this.get(mime, type, permissions);
return actions[name];
},
display: function (parent) {
FileActions.currentFile = parent;
var actions = FileActions.get(FileActions.getCurrentMimeType(), FileActions.getCurrentType(), FileActions.getCurrentPermissions());
var file = FileActions.getCurrentFile();
if ($('tr[data-file="'+file+'"]').data('renaming')) {
return;
}
// recreate fileactions
parent.children('a.name').find('.fileactions').remove();
parent.children('a.name').append('<span class="fileactions" />');
var defaultAction = FileActions.getDefault(FileActions.getCurrentMimeType(), FileActions.getCurrentType(), FileActions.getCurrentPermissions());
var actionHandler = function (event) {
event.stopPropagation();
event.preventDefault();
FileActions.currentFile = event.data.elem;
var file = FileActions.getCurrentFile();
event.data.actionFunc(file);
};
var addAction = function (name, action) {
// NOTE: Temporary fix to prevent rename action in root of Shared directory
if (name === 'Rename' && $('#dir').val() === '/Shared') {
return true;
}
if ((name === 'Download' || action !== defaultAction) && name !== 'Delete') {
var img = FileActions.icons[name];
if (img.call) {
img = img(file);
}
if(name==='Download'){
var html = '<a href="#" class="action" data-action="' + name + '">';
}if(name === 'Share'){
var html = '<span class="sharing"><a href="#" class="action sharing" data-action="' + name + '">';
}
if (img) {
html += '<img class ="svg" src="' + img + '" />';
}
html += t('files', name) + '</a></span>';
var element = $(html);
element.data('action', name);
//alert(element);
element.on('click', {a: null, elem: parent, actionFunc: actions[name]}, actionHandler);
parent.find('a.name>span.fileactions').append(element);
}
};
$.each(actions, function (name, action) {
if (name !== 'Share') {
addAction(name, action);
}
});
if(actions.Share && !($('#dir').val() === '/' && file === 'Shared')){
// t('files', 'Share')
addAction('Share', actions.Share);
}
// remove the existing delete action
parent.parent().children().last().find('.action.delete').remove();
if (actions['Delete']) {
var img = FileActions.icons['Delete'];
if (img.call) {
img = img(file);
}
if (typeof trashBinApp !== 'undefined' && trashBinApp) {
var html = '<a href="#" original-title="' + t('files', 'Delete permanently') + '" class="action delete" />';
} else {
var html = '<a href="#" original-title="' + t('files', 'Delete') + '" class="action delete" />';
}
var element = $(html);
if (img) {
element.append($('<img class ="svg" src="' + img + '"/>'));
}
element.data('action', actions['Delete']);
element.on('click', {a: null, elem: parent, actionFunc: actions['Delete']}, actionHandler);
parent.parent().children().last().append(element);
}
},
getCurrentFile: function () {
return FileActions.currentFile.parent().attr('data-file');
},
getCurrentMimeType: function () {
return FileActions.currentFile.parent().attr('data-mime');
},
getCurrentType: function () {
return FileActions.currentFile.parent().attr('data-type');
},
getCurrentPermissions: function () {
return FileActions.currentFile.parent().data('permissions');
}
};
$(document).ready(function () {
if ($('#allowZipDownload').val() == 1) {
var downloadScope = 'all';
} else {
var downloadScope = 'file';
}
if (typeof disableDownloadActions == 'undefined' || !disableDownloadActions) {
FileActions.register(downloadScope, 'Download', OC.PERMISSION_READ, function () {
return OC.imagePath('core', 'actions/download');
}, function (filename) {
window.location = OC.filePath('files', 'ajax', 'download.php') + '?files=' + encodeURIComponent(filename) + '&dir=' + encodeURIComponent($('#dir').val());
});
}
$('#fileList tr').each(function () {
FileActions.display($(this).children('td.filename'));
});
$('#fileList').trigger(jQuery.Event("fileActionsReady"));
});
FileActions.register('all', 'Delete', OC.PERMISSION_DELETE, function () {
return OC.imagePath('core', 'actions/delete');
}, function (filename) {
if (Files.cancelUpload(filename)) {
if (filename.substr) {
filename = [filename];
}
$.each(filename, function (index, file) {
var filename = $('tr').filterAttr('data-file', file);
filename.hide();
filename.find('input[type="checkbox"]').removeAttr('checked');
filename.removeClass('selected');
});
procesSelection();
} else {
FileList.do_delete(filename);
}
$('.tipsy').remove();
});
// t('files', 'Rename')
FileActions.register('all', 'Rename', OC.PERMISSION_UPDATE, function () {
return OC.imagePath('core', 'actions/rename');
}, function (filename) {
FileList.rename(filename);
});
FileActions.register('dir', 'Open', OC.PERMISSION_READ, '', function (filename) {
window.location = OC.linkTo('files', 'index.php') + '?dir=' + encodeURIComponent($('#dir').val()).replace(/%2F/g, '/') + '/' + encodeURIComponent(filename);
});
FileActions.setDefault('dir', 'Open');
推荐答案
.fileactions > a[data-action="Share"] {
display: none;
!important;
}
因为 .fileactions> a [data-action =share] 会在
It will not work !Why? Because .fileactions>a[data-action="share"] will find the first a tag within the .fileactions class. This is called child combinator one of four combinator of css.
使用它来获得所需的结果
Use this to get the desire result
.fileactions > a:nth-child(2) {
display: none;
}
或使用属性选择器来匹配条件
or use attribute selector to match the condition
[data-action="Share"] {
display:none;
}
这篇关于隐藏类中的第二个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
