如何只附加到每个 div 一次答案

【问题标题】：How to append to each div only once如何只附加到每个 div 一次
【发布时间】：2019-11-18 07:23:55
【问题描述】：

我有几个问题，用户将点击是或否按钮，并希望将他们点击的值附加到一个显示他们选择的空类中。

每次单击“是”或“否”时，该值都会附加到每个问题，以便在底部显示值，即“是”否“否”是。我希望它只显示该特定问题的值。

到目前为止我所拥有的 -

$(function() {
var answer = $(".answer");
answer.each(function(index) {
$(this).on("click", function(){
  var userAnswer = $(this).attr("data-id");
  var displayAnswer = $(".display-answer");
  displayAnswer.each(function() {
      $(this).append(userAnswer);
    });
   });
  });
});

HTML

<div class="question-wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
        <div class="answer-buttons">
            <div class="answer yes"><p>Yes</p></div>
            <div class="answer no"><p>No</p></div>
        </div>
        <div class="display-answer"></div>
    </div>

【问题讨论】：

我们需要看看 html 的结构如何才能提供帮助，但我猜您在每个“答案”div 内或作为兄弟姐妹都有一个“显示答案”div？如果是这样，它们可能共享相同的索引，在这种情况下，您可以使用 $(".display-answer").eq(index) 仅获取您需要的“显示答案”。
@MichaelBeeson HTML 添加（虽然都是通过 js 生成的，但是标记看起来是这样的）

标签： jquery append each

【解决方案1】：

这是获得您描述的结果的一种方法

    $(function(){
    	$(".answer").click(function(){ /*You can register the click handler easily in one step*/
      	var userAnswer = $(this).attr("data-id");
        $(this).parent().siblings(".display-answer").append(userAnswer); /*First, find the parent, then the "display-answer" siblings*/
      });
    
    });

p{
  font-family:sans-serif;
}

.answer{
  border:1px solid black;
  text-align:center;
  flex-grow:100;
  width:100px;
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
    <div class="answer-buttons">
      <div class="answer yes" data-id="yes"><p>Yes</p></div>
      <div class="answer no" data-id="no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>
<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi. Similique dolorem modi quos eius in, unde, sapiente, non ipsa aliquam accusamus quis facilis enim.</p>
    <div class="answer-buttons">
      <div class="answer yes" data-id="yes"><p>Yes</p></div>
      <div class="answer no" data-id="no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>

【讨论】：

非常感谢。效果很好！

【解决方案2】：

一个简单的例子，基于你的标记：

$('.answer').on('click', function() {
    $(this).parent().next().html($(this).html());
    // `$(this).html()` gets the html of an element you clicked on
    // `$(this).parent().next()` - gets `.display-answer` element which 
    // is located `next` to the `parent` of the element you clicked
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <div class="question-wrap">
        <p>Question 1.</p>
        <div class="answer-buttons">
            <div class="answer yes"><p>Yes</p></div>
            <div class="answer no"><p>No</p></div>
        </div>
        <div class="display-answer"></div>
    </div>
    <div class="question-wrap">
        <p>Question 2.</p>
        <div class="answer-buttons">
            <div class="answer yes"><p>Yes</p></div>
            <div class="answer no"><p>No</p></div>
        </div>
        <div class="display-answer"></div>
    </div>
    <div class="question-wrap">
        <p>Question 3.</p>
        <div class="answer-buttons">
            <div class="answer yes"><p>Yes</p></div>
            <div class="answer no"><p>No</p></div>
        </div>
        <div class="display-answer"></div>
    </div>

【讨论】：

【解决方案3】：

感谢您提供 html。这意味着我们可以提供帮助！

U_mulder 的答案绝对有效，只要结构保持完全相同。我使用索引的建议不起作用，因为每个问题有两个“答案”类。

在我在这里添加的 sn-p 中，您会看到我首先使用 .parents(".question-wrap").eq(0) 查找问题包装 div，然后使用 .children(".display-answer").eq(0) 查找显示 div。 .children() 仅在元素的直接子元素中搜索。如果您需要往下看（parents() 的反面），请使用.find()。

在这里您将看到它的实际效果（使用.text() 获取值，因为没有 data-id 属性）

$(function() {
var answer = $(".answer");
answer.each(function(index) {
$(this).on("click", function(){
  var userAnswer = $(this).text();
  var displayAnswer = $(this).parents(".question-wrap").eq(0).children(".display-answer").eq(0);
  displayAnswer.text(userAnswer);
   });
  });
});

.question-wrap {
  flex: 1;
  min-width: 150px;
  display: inline-block;
  margin-left: 10px;
}

.answer {
  cursor: pointer;
}

.display-answer {
  height:20px;
  padding: 10px;
  border: 1px solid lightgreen
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; flex-wrap: wrap">
<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</p>
    <div class="answer-buttons">
        <div class="answer yes"><p>Yes</p></div>
        <div class="answer no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>
<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</p>
    <div class="answer-buttons">
        <div class="answer yes"><p>Yes</p></div>
        <div class="answer no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>

<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</p>
    <div class="answer-buttons">
        <div class="answer yes"><p>Yes</p></div>
        <div class="answer no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>

<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</p>
    <div class="answer-buttons">
        <div class="answer yes"><p>Yes</p></div>
        <div class="answer no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>

<div class="question-wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ea maxime velit hic tenetur, animi.</p>
    <div class="answer-buttons">
        <div class="answer yes"><p>Yes</p></div>
        <div class="answer no"><p>No</p></div>
    </div>
    <div class="display-answer"></div>
</div>
</div>

【讨论】：

感谢您的帮助！另一个很棒的解决方案。