如何將選項標簽的相同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);
});

演示