在jQuery中使用.siblings()

Question

我有这个html代码：

<div class="mws-form-item prova">
   <select class="target" id="select1">
      <option value="noselected" selected="selected"></option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <select class="target">
      <option value="noselected" selected="selected"></option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <select class="target">
      <option value="noselected" selected="selected"></option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
  </select>
  <input type="number" style="width: 35px" min="1" max="99" value="1">
</div>

和jQuery代码：

 $(document).on('change', '.prova> .target', function () { //line 1
    ...
    $( "select" ).each(function( index ) {
        $(this).children().each(function () {
            if (this.innerHTML === selectedValue) {
                $(this).remove();
            }
        });
    });
    ...
});

这将删除与if条件匹配的<select>的所有子元素。如上所述，所有的<select>都会受到影响，相反，我希望这个选择不会受到影响。所以我想这样使用.siblings()：

 $(document).on('change', '.myclass > .target', function () { //line 1
    ...
    $(this).siblings().each(function( index ) {
        $(this).childrens().each(function () {
            if (this.innerHTML === selectedValue) {
                $(this).remove();
            }
        });
    });
    ...
});

但是这不起作用！

然后:除了一个特定的select之外，还有其他方式引用所有select吗？

Answer 1

您可以利用change事件在<select>元素上触发这一事实，并删除触发该事件的事件。如下所示修改您的第一个代码片段：

$( "select" ).not(this).each(...)

也就是说，首先用它们的类(> .target)引用<select>元素，然后用它们的元素名称来引用它们，这是非常令人困惑的--为什么不标准化呢？

Answer 2

$(document).on('change', '.mws-form-item > .target', function () {
    var selectedValue = this.value;
    $(this).siblings('select').children().filter(function () {
        return $(this).text() == selectedValue;
    }).remove();
});

Answer 3

这可能是因为您不能使用

this

像这样的内部函数。这是一个命名空间问题。

尝尝这个

$(document).on('change', '.myclass > .target', function () { //line 1
...
var self = $(this)
$(this).siblings().each(function( index ) 
        self.children().each(function () {
          //HERE THIS IS REFERING TO OPTIONS, RIGHT?
          if (this.innerHTML === selectedValue) {
        self.remove();
          }
        });   
    });
 ...
});

请注意，我还将“孩子”更改为“孩子”。