0

我有一个看起来像这样的 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。

4

2 回答 2

0

试试这个解决方案。这是一个工作小提琴。 http://jsfiddle.net/pSqVP/ 这从 ErikPetru 解决方案中窃取：如何获取十六进制颜色值而不是 RGB 值？.

$.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]);
}

希望这可以帮助。

安迪

于 2013-09-04T20:21:04.957 回答
0

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

$('.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);
};

有什么问题，我来了。

于 2013-09-04T20:45:11.227 回答