Question

我有一个看起来像这样的div：

<div class="productOptionPickListSwatch">
    <ul>
                                                <li class="swatch hasPreview swatchOneColour">
    <label for="e3385b72a9a0c62514edf1a2e6047556">
        <span class="previewContent">
    <span class="
        swatchColours swatchOneColour showPreview
            " title="Black">
        <span class="swatchColour swatchColour_1" style="background-color:#000000;">&nbsp;</span>
    </span>
</span>
        <input type="radio" class="validation" name="attribute[1214]" value="854" id="e3385b72a9a0c62514edf1a2e6047556">
        <span class="name">Black</span>
    </label>
</li>
                                                            <li class="swatch hasPreview swatchOneColour">
    <label for="0d865ed51c5d307d7f98f457fc20e9fa">
        <span class="previewContent">
    <span class="
        swatchColours swatchOneColour showPreview
            " title="Maroon">
        <span class="swatchColour swatchColour_1" style="background-color:#3c1915;">&nbsp;</span>
    </span>
</span>
        <input type="radio" class="validation" name="attribute[1214]" value="857" id="0d865ed51c5d307d7f98f457fc20e9fa">
        <span class="name">Maroon</span>
    </label>
</li>
                                                            <li class="swatch hasPreview swatchOneColour">
    <label for="be3c11263d03737fd198a715a5f9226e">
        <span class="previewContent">
    <span class="
        swatchColours swatchOneColour showPreview
            " title="Gray">
        <span class="swatchColour swatchColour_1" style="background-color:#5c6e75;">&nbsp;</span>
    </span>
</span>
        <input type="radio" class="validation" name="attribute[1214]" value="856" id="be3c11263d03737fd198a715a5f9226e">
        <span class="name">Gray</span>
    </label>
</li>
                                                            <li class="swatch hasPreview swatchOneColour">
    <label for="04673f6abfec9ccd392004a6dbecf685">
        <span class="previewContent">
    <span class="
        swatchColours swatchOneColour showPreview
            " title="White">
        <span class="swatchColour swatchColour_1" style="background-color:#ffffff;">&nbsp;</span>
    </span>
</span>
        <input type="radio" class="validation" name="attribute[1214]" value="855" id="04673f6abfec9ccd392004a6dbecf685">
        <span class="name">White</span>
    </label>
</li>

            </ul>
</div>

我正在尝试使用AJAX从不同的网页获取此div中所有十六进制代码的列表。有点新的AJAX，甚至不知道从哪里开始。

我尝试从这样的事情开始：

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

我从哪里去？什么是获得这种数据的最佳方法？并且所有ID的值都是由变量设置的，所以我不能用它来查找附近的div。

Answer 1

试试这个解决方案。这是一个工作小提琴。 http://jsfiddle.net/pSqVP/这来自ErikPetru解决方案：How to get hex color value rather than RGB value?。

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
  $('.result span.swatchColour').each(function(){
    var rgbColour = $(this).css('backgroundColor');
    var hexColour = rgb2hex(rgbColour);
    alert(hexColour);
  });
});
// This is from StackOverflow post: https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value
function rgb2hex(rgb) {
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   function hex(x) {
     return ("0" + parseInt(x).toString(16)).slice(-2);
   }
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

希望这有帮助。

安迪

Answer 2

要加载外部页面使用加载功能，是最好的方法！

$('.result').load('ajax/test.html', function() {
   $.each($('.result span.swatchColour'), function(index) {
        alert(colorToHex($(this).css('background-color')));
    }); 
});

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

有任何问题，我在这里。

从使用AJAX的其他网页获取<ul>中的十六进制代码列表</ul>

2 个答案: