jQuery-從li獲取div

Question

我是javascript / jquery的新手。 我正在嘗試從li元素中選擇一個div ，我將放置3張圖像。 所以我有這個變量：

var x = ui.item.parent().children()[i]

li是哪一個（它起作用了，我已經檢查了id），但是如何從x獲得div？ （然后所有3張圖片，這樣我就可以更改圖片的z-index ，我也不知道如何）。

<ul>
   <li id="li1">
   <div>
       <img class="1" src="img1.jpg" style="position:absolute;z-index=1">
       <img class="2" src="img2.jpg" style="position:absolute;z-index=2">
       <img class="3" src="img3.jpg" style="position:absolute;z-index=3">
   </div>
   </li>
</ul>

這是我編寫的代碼，但是不起作用（錯誤：Uncaught TypeError：對象＃沒有方法'find'）

for(var i=0;i<ui.item.parent().children().length-4;i++){
    var x =ui.item.parent().children()[i];
    x.find('img').css('z-index', '2');  
                }

Answer 1

請更正您的html。 你的ul在你li之前就結束了。 一旦有了jQuery元素，就可以使用.find（）函數搜索其子級。

例如：

var x = $('li#yourid');

x.find('img').css('z-index', '2');

Answer 2

您的HTML無效，您將在ul和li沒有打開標簽<之后關閉li標簽。

因此正確的HTML是：

<ul>
<li id="li1">
<div>
<img class="1" src="...">
<img class="2">
<img class="3">
</div>
</li>
<ul>

現在要從x獲取div，您需要使用.find() ：

var div = x.find('div');

Answer 3

這樣使用

$("ul li").children("div").find("img").each(function(){
     alert($(this).attr('class'));
});

觀看演示

Answer 4

我不知道HTML是否只是一個示例，但其格式不正確。 它應該是：

<ul>
    <li id="li1">
        <div>
            <img class="1" src="..."/>
            <img class="2"/>
            <img class="3"/>
        </div>
    </li>
</ul>

設置z-index：$（x）.find（'img'）。css（'z-index'，'100'）;