如何将选项标签的相同data-id赋予其他元素？

Question

我有带有特定data-id="x"属性的<option>标记。 我想将选项标签的相同属性（数​​据ID）设置为相应的元素（例如，相同的html）。

到目前为止，这是我所做的，但是我不知道为什么这不起作用。

有人可以帮我吗？

JsFiddle

我想问题是我没有指定哪个$（'。cityName）将获得属性，但我不知道如何指定，因为$（this）将引用每个属性。

这是我正在使用的jQuery：

$('select option').each(function() {
   var value = parseInt($(this).attr('data-id')); 
   var vals = (value+1); //This is optional
   if($('.productsDispo .cityName').text() == $(this).text()){
        $('.cityName').setAttribute('data-id', vals);
       //$('.cityName').append(vals);
    }
});

这是HTML

<select id="citySelector">
    <option data-id="O">Bordeaux</option>
    <option data-id="1">Paris</option>
    <option data-id="2">Londres</option>
    <option data-id="3">Téhéran</option>
</select>

<!-- Product List -->

<div class="productsDispo">
    <div class="cityName">Bordeaux</div>
</div>
<div class="productsDispo">
    <div class="cityName">Londres</div>
</div>
<div class="productsDispo">
    <div class="cityName">Téhéran</div>
</div>
<div class="productsDispo">
    <div class="cityName">Paris</div>  
</div>

Answer 1

您需要使用.each()两次，一次嵌套到另一次。 对于每个<option>您需要检查每个div.cityName 。

有一点要记住的是，在内部.each()变量this是指<div>而不是<option> 。 这就是为什么我使用$option变量。

$('select option').each(function () {
    var $option = $(this);
    var value = parseInt($option.attr('data-id'));
    var vals = (value + 1);
    $('div.cityName').each(function () {
        if ($(this).text() == $option.text()) {
            $(this).attr('data-id', vals);
        }
    });
});

这是一个演示

Answer 2

这是您想要做的...

 $('select option').each(function () {
        var opt = this;
        var value = parseInt($(opt).attr('data-id')) || 0;
        var vals = (value + 1);

        // Check the console Log 
        console.log("what you are excepting", $(opt).text());
        console.log("what is Returning productsDispo .cityName", $('.productsDispo .cityName').text());
        // if you check the console log you have to see you need to check for each 
        $('.productsDispo .cityName').each(function () {
            var item = this;

            if ($(item).text() == $(opt).text()) {
                $(item).attr('data-id', vals);
                //$('.cityName').append(vals);
            }
        });
    });

但是，如果我使您在避免每种情况上有所不同，我会添加一个属性，该属性的名称为和，分别为data-bind-name

<select id="citySelector">
    <option class=".cityName" data-id="O">Bordeaux</option>
    <option class=".cityName" data-id="1">Paris</option>
    <option class=".cityName" data-id="2">Londres</option>
    <option class=".cityName" data-id="3">Téhéran</option>
</select>
<!-- Product List -->
<div class="productsDispo">
    <div class="cityName" data-bind-name="Bordeaux">Bordeaux</div>
</div>
<div class="productsDispo">
    <div class="cityName" data-bind-name="Londres">Londres</div>
</div>
<div class="productsDispo">
    <div class="cityName" data-bind-name="Téhéran">Téhéran</div>
</div>
<div class="productsDispo" data-bind-name="Paris">
    <div class="cityName">Paris</div>
</div>

和jQuery代码是

$('select option').each(function () {
    var opt = this;
    var value = parseInt($(opt).attr('data-id')) || 0;
    var vals = (value + 1);

    // Check the console Log 
    console.log("what you are excepting", $(opt).text());
    console.log("what is Returning productsDispo .cityName", $('.productsDispo .cityName').text());
    // if you check the console log you have to see you need to check for each 
    $('.productsDispo .cityName[data-bind-name='+$(opt).text()+']' ).attr('data-id', vals);
            //$('.cityName').append(vals);

});

Answer 3

each仅使用一个，然后选择contains的相应城市：

 $("select") .change(function () { $("select option:selected").each(function () { var city = $(this).text(); value = parseInt($(this).attr('data-id'), 10); vals = (value + 1); var item = $('.cityName:contains("' + city + '")'); item.attr('data-id', vals); alert('data-id for ' + item.text() + ': ' + item.attr('data-id')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="citySelector"> <option data-id="0">Bordeaux</option> <option data-id="1">Paris</option> <option data-id="2">Londres</option> <option data-id="3">Téhéran</option> </select> <!-- Product List --> <div class="productsDispo"> <div class="cityName">Bordeaux</div> </div> <div class="productsDispo"> <div class="cityName">Londres</div> </div> <div class="productsDispo"> <div class="cityName">Téhéran</div> </div> <div class="productsDispo"> <div class="cityName">Paris</div> </div> 

Answer 4

该选择器$('.productsDispo .cityName')将产生多个元素，因此您必须遍历它或jquery对其进行过滤以获取匹配的元素，然后设置属性。

Answer 5

使用data()方法的替代方法，该方法读取data-属性并作为设置器存储在元素数据集中

var $cityOptions = $('#citySelector option');

$('.productsDispo .cityName').each(function(){
    var $elem = $(this),  
         cityName = $.trim($elem.text()),
         $option = $cityOptions.filter(':contains('+ cityName +')');
    $elem.data('id', +$option.data('id') +1);
});

演示