如何在HTL/Sightly中同时遍历两个列表实现带描述的复选框清单？

方案1：优先推荐：后端Sling模型合并列表（最稳妥） #

两个列表元素为一一对应关系时，最合理的做法是在后端Java模型中将标题和描述组装为同一个对象的属性，完全避免前端索引错位的问题。
后端逻辑参考示例（可根据你的实际模型调整）：

// 定义组合对象
public class CheckboxItem {
    private String code;
    private String name;
    private String desc;
    // 构造方法、getter方法省略
}

// 组装组合列表
List<CheckboxItem> checkboxItemList = new ArrayList<>();
for (int i = 0; i < titleList.size(); i++) {
    checkboxItemList.add(new CheckboxItem(
        titleList.get(i).getCode(),
        titleList.get(i).getName(),
        descList.get(i) // 你的描述列表，即示例的['Apple', 'Orange', 'Grape', 'Melon']
    ));
}

// 把组合后的列表暴露给HTL调用
public List<CheckboxItem> getCheckboxItemList() {
    return checkboxItemList;
}

对应的HTL代码：

<div class="class1"> 
    <ul data-sly-list.item="${model.checkboxItemList}">
        <li class="class2">
            <label class="class3">
                <input type="checkbox" name="check" value="${item.code}">
                <span>${item.name}</span>
            </label>
            <!-- 直接取组装好的描述字段 -->
            <p class="desc-class">${item.desc}</p>
        </li>
    </ul>
</div>

方案2：不改后端，直接用列表索引取值 #

如果暂时无法调整后端模型，可以直接调用HTL循环自带的itemList.index索引变量，从第二个描述列表中取值，前提是两个列表长度完全一致、顺序一一对应。
假设你暴露给HTL的描述列表变量名为${model.descList}，对应值为你给出的示例列表，HTL代码修改如下：

<div class="class1"> 
    <ul data-sly-list.item="${model.titleList}">
        <li class="class2">
            <label class="class3">
                <input type="checkbox" name="check" value="${item.code}">
                <span>${item.name}</span>
            </label>
            <!-- 通过循环索引取对应位置的描述 -->
            <p class="desc-class">${model.descList[itemList.index]}</p>
        </li>
    </ul>
</div>

注意事项 #

• 你原有代码中把<ul>放在了data-sly-list的循环体内，会导致每个复选框都生成一个独立的ul列表，不符合HTML语义，上面的代码已经把ul移到了循环外层，可根据你的布局需求调整。
• 第二种方案需要严格保证标题列表和描述列表的长度完全一致，否则会出现索引越界、描述和标题不匹配的问题，长期维护更推荐使用方案1。

内容的提问来源于stack exchange，提问作者poromazh