jQuery检查一个ul是否包含另一个元素

Question

我有两个清单

我想要做的是从第一个列表中获取每个元素的文本,如果文本与第二个列表中的元素的值匹配,则在选择选项第二个列表中对其进行着色.

这是两个列表:

清单1号

<div id="rssedituserdata">
<li>1444</li>
<li>1445</li>
</div>

清单2

<div class="form-item form-item-labeled" id="edit-field-building-no-value-wrapper">
<select name="field_building_no[value][]" multiple="multiple" class="form-select" id="edit-field-building-no-value">
    <option value="1444">a</option>
    <option value="1445">b</option>
    <option value="1446">c</option>
    <option value="1447">d</option>
    <option value="1448">e</option>
    <option value="1449">f</option>
    <option value="1450">g</option>
</select>
</div>

这就是我到目前为止所做的......

        $("#edit-field-building-no-value-wrapper option").each(function() {
        var building = $(this).text();
        console.log(building);


        $("#rssedituserdata>li").each(function(building) {
            if ($(this).has(building)) {
                building.css('color', 'red');
            }
        });
    });

Answer 1

使用属性选择器选择value属性与列表项文本相同的选项:

    $("#rssedituserdata>li").each(function(i,v) {
       $('option[value="'+$(v).text()+'"]').css('color', 'red');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rssedituserdata">
<li>1444</li>
<li>1445</li>
</div>


<div class="form-item form-item-labeled" id="edit-field-building-no-value-wrapper">
<select name="field_building_no[value][]" multiple="multiple" class="form-select" id="edit-field-building-no-value">
    <option value="1444">a</option>
    <option value="1445">b</option>
    <option value="1446">c</option>
    <option value="1447">d</option>
    <option value="1448">e</option>
    <option value="1449">f</option>
    <option value="1450">g</option>
</select>
</div>

要删除列表中没有的元素,请执行以下操作:向列表中的元素添加一个类,并删除所有没有该类的选项

$("#rssedituserdata>li").each(function(i,v) {
       $('option[value="'+$(v).text()+'"]').addClass('dont-remove').css('color', 'red');
    });
$('option:not(.dont-remove)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rssedituserdata">
<li>1444</li>
<li>1445</li>
</div>


<div class="form-item form-item-labeled" id="edit-field-building-no-value-wrapper">
<select name="field_building_no[value][]" multiple="multiple" class="form-select" id="edit-field-building-no-value">
    <option value="1444">a</option>
    <option value="1445">b</option>
    <option value="1446">c</option>
    <option value="1447">d</option>
    <option value="1448">e</option>
    <option value="1449">f</option>
    <option value="1450">g</option>
</select>
</div>