显示列表所在的div的id

Question

<div id="a" style="background-color:green;">
 <ul>
  <li>abc</li>
   <ul>
    <li>def</li>
   </ul>
 </ul>
</div>
<div id="b" style="background-color:red">
 <ul>
  <li>ghi</li>
   <ul>
    <li>jkl</li>
   </ul>
 </ul>
</div>
<select>
 <option>abc</option>
 <option>def</option>
 <option>ghi</option>
 <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

这是我的HTML代码。它由两个div a和b组成。 a和b div由li元素组成。无论如何，我选择下拉列表并单击按钮，它必须显示使用JQuery存在li的div的id。

Answer 1

您可以通过列表过滤并检查下拉列表中的所选文本并找到包含该列表的div - 请参阅下面的演示：< / p>

＆＃13;

＆＃13;

$('input[type=button]').click(function() {
  let selected = $('select').val();
  console.log(
    $('#a, #b').find('li').filter(function() {
      return selected === $(this).text()
    }).closest('div').attr('id')
  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a" style="background-color:green;">
  <ul>
    <li>abc</li>
    <ul>
      <li>def</li>
    </ul>
  </ul>
</div>
<div id="b" style="background-color:red">
  <ul>
    <li>ghi</li>
    <ul>
      <li>jkl</li>
    </ul>
  </ul>
</div>
<select>
  <option>abc</option>
  <option>def</option>
  <option>ghi</option>
  <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以创建两个单独的数组并在其中推送两个数组的值，并在其中找到所选的下拉值。

请查看下面的代码段。

$(document).ready(function(){
  var aLis = [];
  $("#a li").each(function(){
    aLis.push($(this).text());
  });
  var bLis = [];
  $("#b li").each(function(){
    bLis.push($(this).text());
  });
  
  $("input[type='button']").on("click",function(){
    var selected = $("select").val();
    if($.inArray(selected,aLis) !== -1){
      console.log("Selected value is in div with ID 'a'");
    }else if($.inArray(selected,bLis) !== -1){
      console.log("Selected value is in div with ID 'b'");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a" style="background-color:green;">
  <ul>
    <li>abc</li>
    <ul>
      <li>def</li>
    </ul>
  </ul>
</div>
<div id="b" style="background-color:red">
  <ul>
    <li>ghi</li>
    <ul>
      <li>jkl</li>
    </ul>
  </ul>
</div>
<select>
  <option>abc</option>
  <option>def</option>
  <option>ghi</option>
  <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

Answer 3

＆＃13;

＆＃13;

$("input:button").click(function() {


  var text = $("select option:selected").text();
  var display = $("div ul li").filter(function() {
    return $(this).text() == text;
  }).closest("div").attr("id")
  $("span").text(display)
  console.log(display)

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" style="background-color:green;">
  <ul>
    <li>abc</li>
    <ul>
      <li>def</li>
    </ul>
  </ul>
</div>
<div id="b" style="background-color:red">
  <ul>
    <li>ghi</li>
    <ul>
      <li>jkl</li>
    </ul>
  </ul>
</div>
<select>
  <option>abc</option>
  <option>def</option>
  <option>ghi</option>
  <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

＆＃13;

＆＃13;

＆＃13;

使用过滤器将li的文本与当前所选选项进行比较，然后获取其最接近的div attr id

Answer 4

您只需要点击按钮上的下拉列表的值，然后循环浏览每个PlacesTaskNew placesTaskNew = new PlacesTaskNew(getActivity(),this); 比较文本值，然后找到文本值li的{​​{1}}匹配

parent div

li

Answer 5

您可以使用:contains找到所选的li，然后获取div。

＆＃13;

＆＃13;

$("input[type=button]").on("click",function(){
	var x=$( "li:contains('"+$("select").val()+"')" ).closest("div").get(0).id;
	console.log(x);	
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a" style="background-color:green;">
 <ul>
  <li>abc</li>
   <ul>
    <li>def</li>
   </ul>
 </ul>
</div>
<div id="b" style="background-color:red">
 <ul>
  <li>ghi</li>
   <ul>
    <li>jkl</li>
   </ul>
 </ul>
</div>
<select>
 <option>abc</option>
 <option>def</option>
 <option>ghi</option>
 <option>jkl</option>
</select>
<span display=""></span>
<input type="button" value="click" />

＆＃13;

＆＃13;

＆＃13;