如何为 $(this) 分配多个相同的 class 与唯一 ID

Question

我过去曾问过类似的问题，但我将以下示例放在一起可以更好地说明我正在寻找的结果。

将唯一 ID 与 classic js 一起使用。（有效）

<style>
#par {width:350px; background:#DDD; padding:5px;}
#tatx {color:#C00;}
</style>

<div id="par">
Select an option, then, select another option<br>
<select id="sl" onChange="sltota();tatotx()">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
    <p>Selected options values are passed to textarea<br>
<textarea id="ta" onChange="tatotx()"></textarea>
<p>Textarea value is passed to div as text
<div id="tatx">div text</div>
</div>

<script>
function sltota() {
slVal = document.getElementById('sl').value;
taVal = document.getElementById('ta').value;
document.getElementById('ta').value = taVal + ('- ') + slVal + ('\n');
}

function tatotx() {
taVal = document.getElementById('ta').value;
document.getElementById('tatx').innerHTML = taVal;
}
</script>

现在我正在尝试使用 Jquery $(this) 和具有相同 class 的多个元素来修改此代码。但我无法让它工作，感谢任何帮助。（这不起作用）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<style>
li {margin-bottom:7px; background:#DDD; padding:5px;}
#par {width:350px;}
.tatx {color:#C00;}
</style>

<div id="par">
<ul>

<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>
<li>
Select an option, then, select another option.<br>
<select class="sl">
<option value="item 1">option 1</option>
<option value="item 2">option 2</option>
<option value="item 3">option 3</option>
</select><br>
<p>Selected options values are passed to textarea<br>
<textarea class="ta"></textarea>
<p>Textarea value is passed to div as text
<div class="tatx">Div Text</div>
</li>

</ul>
</div>

<script>
$(document).ready(function(){
$('li > .sl').on('change', function() {
    $(this).sibling('.ta').val($(this).val());
    $(this).sibling('.tatx').val($('.ta').val());

});
}
</script>

Answer 1

应该是siblings不是兄弟：

$('li > .sl').on('change', function() {
    $(this).siblings('.ta').val($(this).val());
    $(this).siblings('.tatx').val($('.ta').val());   
});

jQuery 中没有兄弟选择器，但有 siblings。

Answer 2

几件事：

是siblings，不是sibling。而siblings只看直系兄弟姐妹，不看他们的后代。 .tatx 很好，因为它是直接兄弟，但是 .ta 是兄弟（p 元素）的 child，因此您必须使用 [=17 遍历找到的兄弟=]
您的 JS 代码末尾缺少 ); 以关闭 ready 语句
Divs 不能使用 val(), 设置内容，您需要设置 html()

所以...

<script>
$(document).ready(function(){
$('li > .sl').on('change', function() {
    $(this).siblings().find('.ta').val($(this).val());
    $(this).siblings('.tatx').html($(this).val());
    });
});
</script>

如何为 $(this) 分配多个相同的 class 与唯一 ID

How to assign $(this) with multiple same class vs unique id

jquery

class

this