Question

我有这段代码：

$("#sortable").children('ul li').each(function(index, item) {

    $("#house_wall1").children('.item' + index).attr('alt', index);
});

此代码是两个div的一部分，#sortable和#house_wall1。

必须将alt值更改为#sortable的索引，但现在，它只会更改alt索引的#house_wall1值。有没有办法将第3行改为这样的:( Psedo代码）：

$("#house_wall1").children('.item' + index).attr('alt', index AT #sortable);

如果无法做到这一点，可以这样做：

var i = 0;

$("#sortable").children('ul li').each(function(index, item) {

    $("#house_wall1").children('.item' + index).attr('alt', i);
i++;
});

但由于某些原因，这不起作用。任何建议都表示赞赏，提前谢谢。

更好的解释：

我有两个带有两个不同索引的div。运行此行时：

$("#house_wall1").children('.item' + index).attr('alt', index);

将#house_wall1的索引设置为alt属性，而不是#sortable的索引。因此，alt值设置为等于错误的索引。

嗯......我不知道这是否更容易理解，这是一个非常奇怪的问题。

有用的其他信息：

第一个div #sortable查找#ul li的索引最后一个div #house_wall1应该查找img属性

的索引

HTML：

#sortable

echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
<img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this,\''. $arr['src']. '\')">';

#house_wall1

echo '<img src="' . $src . $rotation .'.png" class="item' . $item_number . '" 
rel="'.$rotation.'" alt="'.$z.'" style="position:absolute; left:' . $x . 'px; top:' . $y . 
'px; z-index:'. $z . ';">'; if ($x != 0) { echo'</a>'; }

Answer 1

使用此HTML（假设它与生成的HTML类似）

<div id="sortable">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>
<div id="house_wall1">
    <img class="item1" src="something.png"/>
    <img class="item2" src="something.png"/>
</div>

代码

$("#sortable").find("ul li").each(function(index, item) {
    //Get the index of the closest div to the li , in this case is div#sortable
    var indexSortable = $(this).closest("div").index() + 1 //the index of sortable is 0 we a dd 1 to match with the item[number] class on the images.
    $("#house_wall1").children('.item' + indexSortable).attr('alt', indexSortable);
});

如果这可以解决您的问题，请告诉我。

Fiddle

如果是可排序的ul：

$("#sortable").children("li").each(function(index, item) {
    //Get the index of the parent in this case the ul sortable
    var indexSortable = $(this).parent().index() + 1 
    $("#house_wall1").children('.item' + indexSortable).attr('alt', indexSortable);
});

<强>解决方案

$("#sortable").find("li img").each(function(){
  //The images hold an id like image_1 and the img in house_wall1 a class like item1
  //This is the relationship between them so we get the id and remove the "img_" part
  //of the id to get the number and assign the attr to the item[n] class on house_wall

var actualItem = $(this).attr("id").replace("img_","item")
var index = $(this).parent().index()

$("#house_wall1").find("img."+actualItem).attr("alt",index)

})

Answer 2

问题出在.children()方法中的选择器中。问题是.children()仅沿着DOM向下移动一个级别，但是您要求第二级元素ul＆gt;李。

解决方案是使用find()方法：

$("#sortable").find('ul li').each(function(index, item){

希望它会有所帮助。

JQuery $（selector）.each（）有两个div

2 个答案: