如何在我选择的div中追加一个值

Question

我必须在选定的div表中附加一个动态创建的td。现在，当我点击按钮时，它会附加在所有div中。我想只追加我选择的div。 HTML -

$(function() {
  $(".module").click(function() {
    $(".work-area").append("<div class='col-md-4 box'><table></table></div>")
  });

  $(".component").click(function() {
    $(".box table").append('<tr><td>x<td><tr>');
  });
});

/* Following CSS is not a part of original question. */
.box{
  height: 40px;
  border: 1px solid gray;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>

    <hr>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>

  </div>
  <div class="col-md-8">
    <div class="work-area">


    </div>
  </div>

</div>

Answer 1

你可以尝试这样的东西，它可能是你正在寻找的，但它有点不清楚。

现在，您可以选择box，并选择其所选组件添加到所选框

$(function() {
  $(".module").click(function() {
    $(".work-area").append("<div class='col-md-4 box'><table></table></div>")
  });

  var divselected = null;
  $(".work-area").on("click", ".box", function() {
    $(".box").removeClass("focus");
    divselected = $(this);
    $(this).addClass("focus");

  })

  $(".component").click(function() {
    if (divselected != null) {
      divselected.append('<tr><td>x<td><tr>');
    }

  });
});

工作演示

$(function() {
  $(".module").click(function() {
    $(".work-area").append("<div class='col-md-4 box'><table></table></div>")
  });

  var divselected = null;
  $(".work-area").on("click", ".box", function() {
    $(".box").removeClass("focus");
    divselected = $(this);
    $(this).addClass("focus");
  })

  $(document).mouseup(function(e) {
    var container = $(".box, .component");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".box").removeClass("focus");
      divselected = null
    }
  });

  $(".component").click(function() {
    if (divselected != null) {
      divselected.append('<tr><td>x<td><tr>');
    }

  });
});

/* Following CSS is not a part of original question. */

.box {
  height: 40px;
  border: 1px solid gray;
  margin: 5px;
}

.box.focus {
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>
    <button class="module">Module-1</button><br/><br/>

    <hr>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>
    <button class="component">component-1</button><br/><br/>

  </div>
  <div class="col-md-8">
    <div class="work-area">


    </div>
  </div>

</div>