Javascript 动态获取附加值

工作示例-

我正在做一个实验性的网页设计师，我试图抓住css选择器已经增加的价值。我制作的小提琴生成了两个按钮，并假设它将克隆输入[type=text]。第一个是X，表示结束。第二个是文本的值。但是，我不断从动态克隆的输入[type=text]返回[object]。控制台中也没有显示任何错误

我想单击按钮，从前面抓取动态添加的值，并将其显示在选择器中。我知道我可以从按钮的文本中获取这些信息，但因为我在应用程序中使用了30多个值，所以坚持使用我正在使用的内容并在一个封闭的容器中获取这些信息会带来更多好处。这样，所有内容都可以分组，更易于管理

不知道为什么不是克隆

$(document).ready(function() {
  $(".addvalz").on('click', function() {
    // Adds value
    $(".val-nester").append("<div class='holddezvalz'><button class='deldizval'>x</button><button class='grabdezvalz'>"+ $(".inputval").val() +"</button>"+ $(".inputval").clone() +"</div>");

    // Can't add same value twice. Replace?
    var $cssselbtn = $(".val-nester > .holddezvalz button:contains(" + $(".inputval").val() + ")");
    if($cssselbtn.length > 1) {
      var x = window.confirm("Selector already exists. Want to replace it?");
      if (x) {
        $cssselbtn.first().parent().remove();
      } else {
        $cssselbtn.last().parent().remove();
        return false;
      }
    }

    // Delete a value
    $(".deldizval").on('click', function() {
      $(this).parent().remove();
    });


  });
});

您将$.inputval.clone放入字符串中，因此它被转换为字符串

请尝试以下方法：

$(".val-nester").append($(".inputval").clone());

编辑：关于整个添加：

var addDiv = $("<div class='holddezvalz'><button class='deldizval'>x</button><button class='grabdezvalz'>" + $(".inputval").val() + "</button></div>");
$(addDiv).append($(".inputval").clone());
$(".val-nester").append(addDiv);

继续展开，只需拆分附加行：

然后，在选择器中，应在其周围加引号和转义引号

":contains('" + $(".inputval").val().replace("'", "\\'") + "')"

---

你想要的不是[object]，而是宽度、高度和填充的值？我只关注选择器。如果我可以得到克隆的宽度、高度和填充不会有问题，但它必须包含在div中，其他元素都添加在其中。在本例中，div.holddezvalzI注意到您没有添加任何关闭或自动关闭标记，不知道它是如何关闭的，但很高兴知道。顺便说一句，它还添加了以前添加的选择器jQuery为您添加结束标记；尖括号只是告诉它创建一个新元素，而不是从域中为它选择一个，添加第二个：这是因为.inputval选择了该类的所有输入。添加类似$.inputval:first.clone的内容以仅获取第一个选择器它还添加了以前添加的选择器“这将如何解决？”mikethedj4是的，我看到了这个问题。实际上，您可以为它们添加唯一的id、数据值或其他任何内容，或者只获取第一个或最后一个。现在我要试着用这个做点什么。valz2add.inputval：第一种类型，它工作得很好。我忘了怎么做了。inputval选择所有具有该名称的类。

$(".val-nester").append($("<div class='holddezvalz'>")
     .append("<button class='deldizval'>x</button>")
     .append("<button class='grabdezvalz'>"+ $(".inputval").val() +"</button>")
     .append($(".inputval").clone())
);

.append( ... + $("<p>").text( $(".inputval").val() ).text() + ... );

":contains('" + $(".inputval").val().replace("'", "\\'") + "')"