如何点击ui:repeat嵌套的子元素时获取外层FAQ条目div容器？

针对你这种在ui:repeat里渲染FAQ条目，需要点击div内子元素时拿到外层#faqEntries容器的需求，我给你几个实用的方案：

方案1：原生JS的closest()方法（推荐） #

closest()方法可以直接向上查找最近的匹配选择器的父元素，非常适合这种场景。因为你的元素是动态渲染的（ui:repeat生成），最好用事件委托的方式绑定事件，避免动态元素绑定失效：

// 绑定到页面上的静态父容器（比如body，或者更接近的静态容器）
document.addEventListener('click', function(event) {
  // 检查点击的元素是否是#faqEntries内的子元素
  const target = event.target;
  const faqDiv = target.closest('#faqEntries');
  if (faqDiv) {
    // 拿到了目标div，这里可以做你需要的操作
    console.log('找到的FAQ容器：', faqDiv);
    // 比如获取容器内的内容、修改样式等
  }
});

⚠️ 重要提示：因为你用了ui:repeat，重复渲染的div如果都用id="faqEntries"会违反HTML规范（id必须唯一），建议把id改成class，比如class="faqEntries"，然后把选择器改成.faqEntries，这样更规范且避免潜在问题。

方案2：jQuery方式（PrimeFaces自带jQuery） #

如果项目里已经在用jQuery（PrimeFaces默认包含），可以用closest()或者parents()方法，同样推荐事件委托：

// 事件委托绑定到静态父元素
$(document).on('click', '.telDialogField, .telDialogButton', function() {
  // 向上查找最近的FAQ容器（建议把id改成class）
  const faqDiv = $(this).closest('#faqEntries');
  // 操作容器
  if (faqDiv.length > 0) {
    console.log('找到的FAQ容器：', faqDiv[0]);
  }
});

方案3：直接给子元素绑定点击事件（不推荐动态场景） #

如果你的ui:repeat渲染后子元素不会动态增删，也可以直接给子元素加点击事件，但这种方式在动态渲染场景下容易失效，优先级不如事件委托：

比如在PrimeFaces组件里加onclick属性：

<p:inputText disabled="true" class="telDialogField" onclick="getOuterDiv(this)"></p:inputText>

然后编写JS函数：

function getOuterDiv(element) {
  const faqDiv = element.closest('#faqEntries');
  if (faqDiv) {
    // 这里写你的处理逻辑
  }
}

总结一下，最稳妥的方案是事件委托+closest()方法，同时记得把重复渲染的div的id改成class，避免id冲突问题。

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