javascript - 如何在jquery中以编程方式选择可选择的项目？

Question

请帮帮我!
如何在jquery中以编程方式选择可选择的项目？
我想手动调用mousedown事件

<div id="Explorer">
<!--items-->
</div>
<input type="button" title="Select" click="Select()"/>
<script>
$("#Explorer").selectable();
function Select() { 
//i know following code is incorrect
$("#Explorer").children().eq(4).select();
}
</script>

Answer 1

代码中的几个错误:

1- select() 的使用是错误的。

2- 不要使用 select 名称重新声明函数

$(function() {
  $("#Explorer").selectable();
});

function my_select() {
  $("#Explorer").find('.item').eq(4).addClass('ui-selected');
}

#Explorer .ui-selecting {
  background: #FECA40;
}

#Explorer .ui-selected {
  background: #F39814;
  color: white;
}

#Explorer {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#Explorer p {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />

<div id="Explorer">
  <p class="item">Item 1</p>
  <p class="item">Item 2</p>
  <p class="item">Item 3</p>
  <p class="item">Item 4</p>
  <p class="item">Item 5</p>
  <p class="item">Item 6</p>
  <p class="item">Item 7</p>
</div>

<input type="button" title="Select" onclick="my_select()" value="select" />