I've been trying to find a way to add attributes to an HTML tag using JQuery, so lets say I have the following HTML code:
我一直在试图找到一种方法，可以使用JQuery将属性添加到HTML标记中，因此，假设我有以下HTML代码:
<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
and:
和:
<input type="password" name="j_password">
I want to be able to substitute those two into the following:
我希望能把这两个式子代入
<input type="text" name="j_username" id="j_username" value="" autofocus required style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Username">
and:
和:
<input type="password" name="j_password" autofocus required style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Password">
All I've been finding online is something like this:
我在网上找到的都是这样的:
http://api.jquery.com/append/
or:
或者:
Use jQuery to change an HTML tag?
使用jQuery更改HTML标记?
But those two aren't the same as what I'm trying to do, because the first one is adding new things between the <tag></tag> and the second one is literally substituting from <tag></tag> to <anotherTag></anotherTag>.
但是这两个和我想要做的不一样，因为第一个是在
I am totally new to JQuery so please bear with me on this one.. :D
我对JQuery完全陌生，所以请在这一点上容忍我。:D
EDIT: This is the JS file that I'm trying to modify to add the above (for reference)
编辑:这是我正在修改的JS文件，以添加上面的内容(供参考)
function checkToggle(e) {
e.prop("checked",!0)
}
function writeCookie(e,t,n) {
var o,r;n?(o=new Date,o.setTime(o.getTime()+1e3*60*60*24*n),r="; expires="+o.toGMTString()):r="",
document.cookie=e+"="+t+r+"; path=/"
}
function readCookie(e) {
var t,n,o,r=e+"=";
for(o=document.cookie.split(";"),t=0; o.length>t; t++) {
for(n=o[t]; " "==n.charAt(0);)
n=n.substring(1,n.length);
if(0==n.indexOf(r))
return n.substring(r.length,n.length)
}
return""
}
jQuery (
function(e) {
function t(t) {
return e("<div />",{"class":t})
}
if ("/login"==window.location.pathname) {
var n="Welcome to Jenkins";
// var user='autofocus required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Username"';
// var pass='autofocus required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;" placeholder="LDAP Password"';
e("#main-panel"),e("#side-panel");
var o=e('input[name="j_username"]').closest("td").prev("td").addClass("input-label"),r=e('input[name="j_password"]').closest("td").prev("td").addClass("input-label");
// e('input').replaceTag($('<input autofocus="" required="" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: -298px 0px; background-repeat: no-repeat;">').addClass('wasDiv'), true);
e("a[href=signup]").closest("div").addClass("signup-container"),e("#yui-gen1-button").addClass("login-button");
var i=e(".submit-button"),a=e("#main-panel div:first").addClass("login-container"),c=e('form[name="login"]').length;
c&&(o.text(""),r.text(""),a.removeAttr("style"),a.wrap(t("login-outer")),a.wrap(t("login-wrapper").prepend(" <h2> "+n+" </h2> ")),i.wrap(t("button-wrapper")),e(".login-container div:last").removeAttr("style"))
}
}
),
jQuery (
function(e) {
var t='<div class="toggle"></div><input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"><label for="cmn-toggle-7" data-on="Hide" data-off="Show"></label>';
e("#description-link").text("edit description"),e("#description").before(t),"checked"!=readCookie("toggle")?e("#description").hide():(checkToggle(e(".cmn-toggle")),e("#description").show()),e(".cmn-toggle").change(function() {
e("#description").slideToggle("fast"),e(".cmn-toggle").is(":checked")?writeCookie("toggle","checked",30):writeCookie("toggle","unchecked",30)
})
}
),
jQuery (
function() {
function e(e) {
var t=jQuery(e.target),n=t.attr("name"),r=t.attr("value"),i=t.is(":checked");
"on"===r&&(i=!1),document.cookie=n+"="+o(r+i)
}
function t(e) {
var t=jQuery(e.target),r=t.attr("name"),i=t.attr("value"),a=t.is(":checked");
return n(r)===o(i+a)?!0:!1
}
function n(e) {
var t,n,o,r=e+"=";
for (o=document.cookie.split(";"),t=0; o.length>t; t++) {
for (n=o[t]; " "==n.charAt(0);)
n=n.substring(1,n.length);
if(0==n.indexOf(r))
return n.substring(r.length,n.length)
}
return""
}
function o(e) {
for(var t=e.length,n=[],o=0; t>o; o++) {
var r=e[o].charCodeAt().toString(2);
n.push(Array(8-r.length+1).join("0")+r)
}
return n.join(" ")
}
var r="#dfd",i="#fff";
jQuery ('.setting-input, input[type="checkbox"]').one("click",function(t) {
e(t)
}),
jQuery(".setting-input").on("input propertychange paste",function(e) {
t(e)?jQuery(e.target).css("background-color",i):jQuery(e.target).css("background-color",r)
}),
jQuery('input[type="checkbox"]').change(function(e) {
t(e)?jQuery(e.target.parentNode).css("background-color",i):jQuery(e.target.parentNode).css("background-color",r)
})
}
);
As you can see, I've tried to do a couple of things, but it ended up failing badly..
正如你所看到的，我试着做了几件事，但最终失败了。
EDIT2: So thanks to Milney's answer I ended up achieving what I needed! This is how it looks like now:
所以多亏了米尔尼的回答，我最终实现了我所需要的!这就是它现在的样子:
jQuery (
function(e) {
function t(t) {
return e("<div />",{"class":t})
}
if ("/login"==window.location.pathname) {
var n="Welcome to Jenkins";
e("#main-panel"),e("#side-panel");
var o=e('input[name="j_username"]').attr({placeholder:"LDAP Username",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label"),r=e('input[name="j_password"]').attr({id:"j_password",placeholder:"Password",autofocus:"",required:""}).closest("td").prev("td").addClass("input-label");
e("a[href=signup]").closest("div").addClass("signup-container"),e("#yui-gen1-button").addClass("login-button");
var i=e(".submit-button"),a=e("#main-panel div:first").addClass("login-container"),c=e('form[name="login"]').length; c&&(o.text(""),r.text(""),a.removeAttr("style"),a.wrap(t("login-outer")),a.wrap(t("login-wrapper").prepend(" <h2> "+n+" </h2> ")),i.wrap(t("button-wrapper")),e(".login-container div:last").removeAttr("style"));
}
}
),
3 个解决方案
#1
2
The .attr method can be used both to read and manipulate attributes. This should be fairly simple. Try reading the manual page for that method: http://api.jquery.com/attr/
可以使用.attr方法来读取和操作属性。这应该相当简单。尝试阅读该方法的手册页:http://api.jquery.com/attr/。
As noted in the comments, consider using CSS classes for this because adding style attributes to many individual elements can get messy very quickly.
正如评论中提到的，考虑使用CSS类来实现这一点，因为在许多单个元素中添加样式属性会很快变得混乱。
#2
1
You can run a loop and cross check all the attributes with the first element and if it is not existing you can add it to the second element
您可以运行一个循环，并通过第一个元素检查所有的属性，如果它不存在，您可以将它添加到第二个元素。
//your first element
$('#j_username').each(function() {
$.each(this.attributes, function() {
if(this.specified) {
var name = this.name;
var value = this.value;
var flag = 0;
//your second element
$('#j_password').each(function() {
$.each(this.attributes, function() {
if(this.specified) {
if(this.name == name) {
flag = 1;
}
}
});
if (flag == 0) {
$('#j_password').attr(name, value);
}
});
}
});
});
Here is your HTML elements
这是您的HTML元素。
<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
<input type="password" name="j_password" id='j_password'>
But you need a class or password to access the second element
但是您需要一个类或密码才能访问第二个元素。
Here's a demo
这是一个演示
#3
0
You can add attributes by using the .attr() function
您可以使用.attr()函数添加属性。
$("#j_username").attr("placeholder","LDAP Username");
#1
2
The .attr method can be used both to read and manipulate attributes. This should be fairly simple. Try reading the manual page for that method: http://api.jquery.com/attr/
可以使用.attr方法来读取和操作属性。这应该相当简单。尝试阅读该方法的手册页:http://api.jquery.com/attr/。
As noted in the comments, consider using CSS classes for this because adding style attributes to many individual elements can get messy very quickly.
正如评论中提到的，考虑使用CSS类来实现这一点，因为在许多单个元素中添加样式属性会很快变得混乱。
#2
1
You can run a loop and cross check all the attributes with the first element and if it is not existing you can add it to the second element
您可以运行一个循环，并通过第一个元素检查所有的属性，如果它不存在，您可以将它添加到第二个元素。
//your first element
$('#j_username').each(function() {
$.each(this.attributes, function() {
if(this.specified) {
var name = this.name;
var value = this.value;
var flag = 0;
//your second element
$('#j_password').each(function() {
$.each(this.attributes, function() {
if(this.specified) {
if(this.name == name) {
flag = 1;
}
}
});
if (flag == 0) {
$('#j_password').attr(name, value);
}
});
}
});
});
Here is your HTML elements
这是您的HTML元素。
<input type="text" name="j_username" id="j_username" autocorrect="off" autocapitalize="off" style="background-image: linear-gradient(rgba(255, 255, 255, 0) 96%, rgb(41, 140, 196) 4%); background-position: 0px 0px; background-repeat: no-repeat;">
<input type="password" name="j_password" id='j_password'>
But you need a class or password to access the second element
但是您需要一个类或密码才能访问第二个元素。
Here's a demo
这是一个演示
#3
0
You can add attributes by using the .attr() function
您可以使用.attr()函数添加属性。
$("#j_username").attr("placeholder","LDAP Username");