javascript可以通过“过滤”进行过滤吗；“风格”；已筛选的<；列表的值；李>；标签？

因此，我有一个在线商店产品页面，左侧显示产品图像，右侧有一些选项（大小、颜色）。现在，当客户登陆此页面时，一些颜色选项将使用一些javascript代码隐藏。那代码就像一个冠军。现在，在颜色被隐藏之后，我需要让一些其他代码选择第一个可见颜色选项，以便页面的其他javascript代码将加载图像的正确颜色照片。下面是我正在使用的HTML代码：

<div class="productOptionPickListSwatch">
<ul>
    <li style="display: none;" class="swatch hasPreview swatchOneColour selectedValue">
        <label for="1cd2d5722d58b184b22e60490cb790ad">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Ash Grey">
                    <span class="swatchColour swatchColour_1" style="background-color:#D2D4D3;">&nbsp;</span>
                </span>
            </span>
        <input checked="checked" class="validation" name="attribute[3091]" value="2704" id="1cd2d5722d58b184b22e60490cb790ad" type="radio">
        <span class="name">Ash Grey</span>
        </label>
    </li>
    <li style="display: none;" class="swatch hasPreview swatchOneColour">
        <label for="2ea2a6a1b415e9231d477cea8be09068">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Black">
                    <span class="swatchColour swatchColour_1" style="background-color:#252525;">&nbsp;</span>
                </span>
            </span>
        <input class="validation" name="attribute[3091]" value="2708" id="2ea2a6a1b415e9231d477cea8be09068" type="radio">
        <span class="name">Black</span>
        </label>
    </li>
    <li style="display: none;" class="swatch hasPreview swatchOneColour">
        <label for="702b2730a02e931fb60b8b032ca421f1">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Hunter Green">
                    <span class="swatchColour swatchColour_1" style="background-color:#0D2C26;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2731" id="702b2730a02e931fb60b8b032ca421f1" type="radio">
            <span class="name">Hunter Green</span>
        </label>
    </li>
    <li style="display: inline-block;" class="swatch hasPreview swatchOneColour">
        <label for="ab898f9ee27d5fba28b277b895f916f2">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Red">
                    <span class="swatchColour swatchColour_1" style="background-color:#C01E36;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2766" id="ab898f9ee27d5fba28b277b895f916f2" type="radio">
            <span class="name">Red</span>
        </label>
    </li>
    <li style="display: inline-block;" class="swatch hasPreview swatchOneColour">
        <label for="237a97b716a4fec4ee62438c27e20570">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Wine">
                    <span class="swatchColour swatchColour_1" style="background-color:#602B35;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2783" id="237a97b716a4fec4ee62438c27e20570" type="radio">
            <span class="name">Wine</span>
        </label>
    </li>
</ul>

灰灰色


黑色


猎人绿


红色


葡萄酒

现在，我没有创建上面的HTML代码，是一些系统创建的。但是正如您所看到的，一些

标记有一个style=“display:none；”（隐藏的颜色选项），还有两个标记有style=“display:inline block；”（可用的颜色选项）

我想能够做的是只过滤那些“样式”等于“内联块”的标签，然后一旦找到第一个，将其类更改为添加了“selectedValue”，并将输入设置为“checked=checked”。下面我的javascript代码可以工作，但不管样式设置为什么，都会设置第一个

标记

<script>
    $(document).ready(function() {
    $('#about').addClass('expand');
    $(".productOptionPickListSwatch ul").each(function(){
    $(this).children("li").first().addClass("selectedValue");
    $("li.selectedValue input.validation").attr('checked',true);

    });
    });
</script>

$（文档）.ready（函数（）{
$（'#about'）.addClass（'expand'）；
$（“.productOptionPickListSwatch ul”）。每个（函数（）{
$（this）.children（“li”）.first（）.addClass（“selectedValue”）；
$（“li.selectedValue input.validation”）.attr（'checked'，true）；
});
});

那么，这种类型的过滤器可能吗？它去哪里了？我错过了什么

谢谢你的意见

更新

因此，我使用了@dtanders提供的代码，它基于我最初请求中提供的代码工作。但是当代码在实际页面上测试时，什么都没有发生。正如我在下面的一条评论中所述，有一些javascript正在过滤样例并将“样式”信息添加到

标记中。我发现代码：

for (var j=0; j < colorArray.length; j++){
    console.log(colorArray[j]);
     $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block');
  }

for（var j=0；j

然后我添加了@dtanders提供的代码：

for (var j=0; j < colorArray.length; j++){
    console.log('colorArray: ' + colorArray[j]);
    console.log('colorArray_J: ' + j);
     $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block')
                     .first().addClass("selectedValue")
     .find("input.validation").prop('checked',true);
  }

for（var j=0；j

这类工作。我将“selectedValue”添加到

标记的类中，但是“input”没有得到更新

那么，现在有一个新问题，为什么标记不能更新？

$(function() {
   $('#about').addClass('expand');
   $(".productOptionPickListSwatch ul li[style*='inline-block']")
         .first().addClass("selectedValue")
         .find("input.validation").prop('checked',true);
});

---

多亏了@dtanders和一大堆谷歌搜索，我终于让它开始工作了

for (var j=0; j < colorArray.length; j++){
    console.log('colorArray: ' + colorArray[j]);
    console.log('colorArray_J: ' + j);
     if(j == 0)
     {
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').find('input.validation').click().prop('checked',true);
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block')
                     .first().addClass("selectedValue");
     }
     else
     {
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block');
     }
  }

for（var j=0；j

这段代码最终被插入到页面前面处理样例的位置。我并没有写那个代码，我只是把我的修改放进去了

---

谢谢你的帮助

你试过jquery过滤器吗？如果你在整个颜色数组中循环，你将在每种颜色上设置checked，但是你的代码似乎只适用于一种颜色。如果在页面加载时没有任何颜色可见，也许你需要设置一个超时以允许站点JS在你尝试选择它使其可见的第一种颜色之前运行？不。但事实并非如此。对任何LI标记都没有更改。对您的示例输入有效-所以我猜live页面是不同的。好吧，那么您是对的。代码基于我提供的内容工作。在查看页面上的其余代码时，我注意到在查看源代码时，

标记中没有出现“样式”。但是当我在Firefox中“检查”时，我可以看到“风格”就在那里。所以，这让我想到还有其他一些javascript在起作用。还有。我找到了样例过滤器的位置，并将部分代码添加到其中，有点效果。只是对原始帖子进行了更新。有什么想法吗？