Question

我有<option>个标记，其中包含特定的data-id="x" attribut。我想将option标签的相同属性（data-id）设置为相应的元素（例如，相同的html）。

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

有人可以帮我吗？

我想问题是我没有指定哪个$（＆＃39; .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);
        }
    });
});

这是demo

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 的属性和html

<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-属性以及将元素数据集中的存储作为setter

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);
});

DEMO

如何将选项标签的相同data-id归属于其他元素？

以下是我使用的jQuery：

这是HTML

5 个答案: