如何使用HTML值填充我的对象？ （阵列）

Question

我有form允许用户修改文件，我在文件中替换某些值时遇到了一些麻烦。我不知道如何进行循环并替换对象。

我需要像这样保持两者的索引：

obj.environment[0] = children[0]
obj.environment[1] = children[1]

正如您所看到的，表单中的environment可能比object中的myObj = {environment: ["a","b","c"]} $('#labelEnv').children('input').each(function () { myObj.environment[id] = this.value });更多，因为用户添加了一些，所以应该在之后添加它们。

＆＃13;

＆＃13;

.form-style-2{
  max-width: 600px;
  padding: 10px 10px 2px 10px;
  font: 13px Arial, Helvetica, sans-serif;
  background: rgba(blue, 0.8);
}
.form-style-2-heading{
  color:black;
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}
.form-style-2 label{
  display:table;
  width: 100%;
  font-size: 15px;
}

.form-style-2 label > span{
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width:25%;
  display: table-cell;
}
.form-style-2 span.required{
  color:red;
}

.form-style-2 a{
  display: block;
}
.form-style-2 input.input-field {
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  box-sizing: border-box;
  display: table-cell;
  margin: 4px;
  outline: medium none;
  padding: 7px;
  width: 31%;
}
.form-style-2 input.env, input.vol{
  width: 100% !important;
}
.form-style-2 input.nameModif{
  width: 50% !important;
}


.form-style-2 .input-field:focus{
  border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: green;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  margin-right: 10px;
}
.form-style-2 input.saveModif:hover{
  background: green;
  color: #fff;
}

.form-style-2 input.cancelModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: red;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
}
.form-style-2 input.cancelModif:hover{
  background: red;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divCodeContainer">
        <div class="form-style-2">
          <div class="form-style-2-heading"></div>
          <form action="" method="post">
            <label>
              <span>Container name
                <span class="required">*</span>
              </span>
              <input type="text" class="input-field nameModif" value="" />
            </label>
            <label id="labelEnv">
              <span>Environment
              </span>
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
            </label>
            <label>
              <span>&nbsp;</span>
              <input class="saveModif" type="button" value="Save" />
              <input class="cancelModif" type="button" value="Cancel" />
            </label>
        </form>
      </div>
    </div>

＆＃13;

$users = user::leftJoin("posts","users.id","=","posts.user_id")->get();

＆＃13;

＆＃13;

＆＃13;

该代码段不起作用，这是错误的，因为我不知道应如何制作循环

Answer 1

将index添加到您的.each()，例如.each(function (index)

然后您可以使用myObj.environment[index]

$('#labelEnv').children('input').each(function (index) {
  myObj.environment[index] =  this.value
});

＆＃13;

＆＃13;

myObj = {environment: ["a","b","c"]} 
$('#labelEnv').children('input').each(function (index) {
  myObj.environment[index] =  this.value
});

console.log(myObj)

＆＃13;

.form-style-2{
  max-width: 600px;
  padding: 10px 10px 2px 10px;
  font: 13px Arial, Helvetica, sans-serif;
  background: rgba(blue, 0.8);
}
.form-style-2-heading{
  color:black;
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}
.form-style-2 label{
  display:table;
  width: 100%;
  font-size: 15px;
}

.form-style-2 label > span{
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width:25%;
  display: table-cell;
}
.form-style-2 span.required{
  color:red;
}

.form-style-2 a{
  display: block;
}
.form-style-2 input.input-field {
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  box-sizing: border-box;
  display: table-cell;
  margin: 4px;
  outline: medium none;
  padding: 7px;
  width: 31%;
}
.form-style-2 input.env, input.vol{
  width: 100% !important;
}
.form-style-2 input.nameModif{
  width: 50% !important;
}


.form-style-2 .input-field:focus{
  border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: green;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  margin-right: 10px;
}
.form-style-2 input.saveModif:hover{
  background: green;
  color: #fff;
}

.form-style-2 input.cancelModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: red;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
}
.form-style-2 input.cancelModif:hover{
  background: red;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divCodeContainer">
        <div class="form-style-2">
          <div class="form-style-2-heading"></div>
          <form action="" method="post">
            <label>
              <span>Container name
                <span class="required">*</span>
              </span>
              <input type="text" class="input-field nameModif" value="" />
            </label>
            <label id="labelEnv">
              <span>Environment
              </span>
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <input type="text" class="input-field env" value="replace me" />
              <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
            </label>
            <label>
              <span>&nbsp;</span>
              <input class="saveModif" type="button" value="Save" />
              <input class="cancelModif" type="button" value="Cancel" />
            </label>
        </form>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用$.each()

的索引

$('#labelEnv').children('input').each(function(index) {
    myObj.environment[index] = this.value
});

＆＃13;

＆＃13;

myObj = {
  environment: ["a", "b", "c"]
}
$('#labelEnv').children('input').each(function(index) {
  myObj.environment[index] = this.value
});

console.log(myObj.environment);

＆＃13;

.form-style-2 {
  max-width: 600px;
  padding: 10px 10px 2px 10px;
  font: 13px Arial, Helvetica, sans-serif;
  background: rgba(blue, 0.8);
}

.form-style-2-heading {
  color: black;
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}

.form-style-2 label {
  display: table;
  width: 100%;
  font-size: 15px;
}

.form-style-2 label>span {
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width: 25%;
  display: table-cell;
}

.form-style-2 span.required {
  color: red;
}

.form-style-2 a {
  display: block;
}

.form-style-2 input.input-field {
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  box-sizing: border-box;
  display: table-cell;
  margin: 4px;
  outline: medium none;
  padding: 7px;
  width: 31%;
}

.form-style-2 input.env,
input.vol {
  width: 100% !important;
}

.form-style-2 input.nameModif {
  width: 50% !important;
}

.form-style-2 .input-field:focus {
  border: 1px solid #0C0;
}

.form-style-2 input.saveModif {
  border: none;
  padding: 5px 5px 5px 5px;
  background: green;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
  margin-right: 10px;
}

.form-style-2 input.saveModif:hover {
  background: green;
  color: #fff;
}

.form-style-2 input.cancelModif {
  border: none;
  padding: 5px 5px 5px 5px;
  background: red;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
}

.form-style-2 input.cancelModif:hover {
  background: red;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divCodeContainer">
  <div class="form-style-2">
    <div class="form-style-2-heading"></div>
    <form action="" method="post">
      <label>
              <span>Container name
                <span class="required">*</span>
              </span>
              <input type="text" class="input-field nameModif" value="" />
            </label>
      <label id="labelEnv">
              <span>Environment
              </span>
              <input type="text" class="input-field env" value="replace me a" />
              <input type="text" class="input-field env" value="replace me b" />
              <input type="text" class="input-field env" value="replace me c" />
              <input type="text" class="input-field env" value="replace me" />
              <a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
            </label>
      <label>
              <span>&nbsp;</span>
              <input class="saveModif" type="button" value="Save" />
              <input class="cancelModif" type="button" value="Cancel" />
            </label>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

怎么样：

myObj.environment = $('#labelEnv').children('input').get().map( e => e.value )