Javascript 使用父标签中的Find函数查找元素

发布于02月12日

我试图构建一个动态 Select 框，但当我单击每个.option个标签时，它的标题在所有 Select 中的位置--在整个页面中显示.

我希望它只被放在.select-show元素中，而不是其他元素中，恰好在同一个父.selectbox标签中.

$(".option").click(function() {
  let selectBoxShow = $(this).parent().find(".select").find(".select-shows");
  let optionTitle = $(this).find(".option-title").text();
  selectBoxShow.text(optionTitle);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"/>

<div class="selectbox w-50 mb-5">
  <div class="select">
    <div>
      <i class="fa-light fa-grid-2"></i>
      <span class="select-shows">Select your City</span>
    </div>
    <i class="fas fa-angle-down"></i>
  </div>
  <menu class="options">
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Whitehorse</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Yellowknife</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Regina</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Winnipeg</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Charlottetown</span>
      </div>
    </div>
  </menu>
</div>

$(".option").click(function() { const $option = $(this); const selectBoxShow = $option.closest('.selectbox').find(".select .select-shows"); const optionTitle = $option.find(".option-title").text(); selectBoxShow.text(optionTitle); });

Javascript 使用父标签中的Find函数查找元素

推荐答案

Javascript相关问答推荐

为什么我达到了时间限制！？LeetCode链接列表循环(已解决，但需要解释！)

RxJS setTimeout操作符等效

我应该绑定不影响状态的函数吗？'

WebRTC关闭navigator. getUserMedia正确

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题？

当Redux提供程序访问Reduxstore 时，可以安全地从Redux提供程序外部调用钩子？

Next.js服务器端组件请求，如何发送我的cookie token？

类构造函数不能在没有用With Router包装的情况下调用

WP Bootstrap NavWaker：下拉菜单一次打开所有下拉菜单

当用户点击保存按钮时，如何实现任务的更改？

如何访问此数组中的值？

如何用javascript更改元素的宽度和高度？

自动滚动功能在当前图像左侧显示上一张图像的一部分

无法使用npm install安装react-dom、react和next

谷歌饼图3D切片

在Java脚本中构建接口的对象

无法使用Redux异步函数读取未定义的useEffect钩子的属性'；map'；

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

Played link-Initialize.js永远显示加载符号

在此div中添加一个类，并在一段时间后在Java脚本中将其删除