確定子元素的類並刪除所有匹配類的屬性

我試圖刪除與點擊元素的子類的類匹配的所有元素的屬性。確定子元素的類並刪除所有匹配類的屬性

例如

<span class="parent"> 
    <span class="child1"> 
     <a href="mylink">text</a> 
    </span> 
</span> 

<span class="child1"> 
    <a href="mylink">text</a> 
</span>

我有代碼，其去除從被點擊的元素的屬性href。但是，我希望能夠刪除任何具有相同鏈接的元素。

我當然可以指定特定的類，但我希望代碼找到被單擊的父級的子類，然後找到任何匹配的類並刪除href。

在這種情況下，人會點擊.parent元素，代碼搜索類的子元素，.child1，去掉href也刪除也有一個匹配的類孩子的任何元素的href元素，.child1。

的代碼會因此做同樣爲以下情況

<span class="parent"> 
    <span class="child2"> 
     <a href="mylink">text</a> 
    </span> 
</span> 

<span class="child2"> 
    <a href="mylink">text</a> 
</span>

去除href所有.child2類。

原因是因爲我需要多次使用此功能，而且我不希望每次都指定要刪除href的類時編寫不同的代碼。

我在想這個構造會沿着下面的幾行，儘管我不確定用什麼組合來實現它。

$("parant").click(function() { 
    $.find(this.childrenClass, function() { 
     $.removeAtt("href"); 
    }); 
});

來源

2013-01-01 Richard Harris

的child2沒有HREF，是一個跨度。 – HMarioD

該href不是在一個孩子，它是在一個孫子。它總是隻有兩個級別，或者它可以是任何數字？如果它可以是任何數字，我們如何找到我們應該匹配的班級的跨度 - 是最大跨度的孩子還是A的父母？ – Barmar

以上僅僅是一個示例結構，如果它是一個孩子或孫子，它並不重要，我可以真正擁有這個href。同樣，href將始終與父級相同，不管是孩子還是孫子，但不會變化。 –

的代碼應該是不言自明：

$('.parent').click(function() { 
    // Get all classes from child elements. 
    var classes = $(this).children().map(function() { 
     return this.className.split(/\s+/); 
    }).get(); 

    // Find any element having one of those classes, find all `a` children 
    // and remove the href attribute. 
    $('.' + classes.join(',.')).children('a').removeAttr('href'); 
});

在這裏，我只是在尋找有與任何兒童的常見一類的任何元素。如果需要，您必須調整代碼以將其限制爲某些元素。

根據您的實際標記，也可以簡化代碼（即，如果每個家長只有一個孩子或每個孩子只有一個班級）。

DEMO

來源

2013-01-01 23:43:31

謝謝。看過演示，它具有我正在尋找的功能。我將嘗試將其應用於我的代碼並使其運行。 –

好吧，我已經測試了代碼，它在構建時正常工作。但是，最初我應該強調一個新問題。元素的href在第一次被點擊時是必需的。之後它將不再需要。在代碼原樣的情況下，它會在href的初始操作發生之前刪除匹配類的所有「href」。有沒有一種方法可以從單擊的元素中排除href刪除，並且只能從其他匹配元素中刪除？ –

道歉，我不小心刪除了在href上執行操作所需的類。此代碼現在正常工作，正如所需。非常感謝你。由於只有一個班的孩子，我不需要指定。但是，如果將來需要指定一個類或哪個孩子用於其他任何事情，那麼您會如何修改代碼？ –

$(".parent").click(function() { 
    var $this = $(this), 
     klass = $this.children("span").attr("class"); 
    $("." + klass).find("a").removeAttr("href"); 
});

http://jsfiddle.net/366cc/

來源

2013-01-01 23:47:05

謝謝。看過演示，它具有我正在尋找的功能。我將嘗試將其應用於我的代碼並使其運行。 –

我試過了代碼，但它會產生JS錯誤。看不到它的原因，但也許有一些小失蹤？它正在演示頁面上工作，所以不確定。 –

@ user1941653因爲代碼非常簡單，所以很難說爲什麼它在_your_代碼中不起作用。 –

確定子元素的類並刪除所有匹配類的屬性

回答

相關問題